teamBeginner

Team — Founders

Smaller team layout featuring leadership.

Live preview

Claude prompt

Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.

Build a founders / leadership section with Tailwind: large cards with bigger portraits, name, title, and a paragraph bio. Used for About pages emphasizing leadership.

Code

html

<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/marketing/team-sections/3.html
  License: MIT
  Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/hyperui-team-3
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
  <div class=" w-full">
<div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
      <div class="grid grid-cols-2 gap-8 sm:grid-cols-3 lg:grid-cols-6">
        <div>
          <img
            src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160"
            alt=""
            class="aspect-square rounded-full object-cover"
          />

          <div class="mt-4 text-center">
            <h3 class="text-lg/tight font-semibold text-gray-900">Eric Johnson</h3>

            <p class="mt-0.5 text-sm text-gray-700">Product Designer</p>
          </div>
        </div>

        <div>
          <img
            src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160"
            alt=""
            class="aspect-square rounded-full object-cover"
          />

          <div class="mt-4 text-center">
            <h3 class="text-lg/tight font-semibold text-gray-900">Eric Johnson</h3>

            <p class="mt-0.5 text-sm text-gray-700">Product Designer</p>
          </div>
        </div>

        <div>
          <img
            src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160"
            alt=""
            class="aspect-square rounded-full object-cover"
          />

          <div class="mt-4 text-center">
            <h3 class="text-lg/tight font-semibold text-gray-900">Eric Johnson</h3>

            <p class="mt-0.5 text-sm text-gray-700">Product Designer</p>
          </div>
        </div>

        <div>
          <img
            src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160"
            alt=""
            class="aspect-square rounded-full object-cover"
          />

          <div class="mt-4 text-center">
            <h3 class="text-lg/tight font-semibold text-gray-900">Eric Johnson</h3>

            <p class="mt-0.5 text-sm text-gray-700">Product Designer</p>
          </div>
        </div>

        <div>
          <img
            src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160"
            alt=""
            class="aspect-square rounded-full object-cover"
          />

          <div class="mt-4 text-center">
            <h3 class="text-lg/tight font-semibold text-gray-900">Eric Johnson</h3>

            <p class="mt-0.5 text-sm text-gray-700">Product Designer</p>
          </div>
        </div>

        <div>
          <img
            src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160"
            alt=""
            class="aspect-square rounded-full object-cover"
          />

          <div class="mt-4 text-center">
            <h3 class="text-lg/tight font-semibold text-gray-900">Eric Johnson</h3>

            <p class="mt-0.5 text-sm text-gray-700">Product Designer</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>