teamBeginner
Team — Compact Cards
Tight team cards with circular portraits.
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 compact team section with Tailwind: a grid of cards each with a circular portrait at the top, name, and role. Used for trim About pages.
Code
html
<!--
Source: Mert Cukuren (Tailblocks)
https://github.com/mertJF/tailblocks/blob/master/src/blocks/team/light/b.js
License: MIT
Surfaced via https://vibedex.io/components/tailblocks-team-light-b
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
<div class="w-full">
<section class="text-gray-600 body-font">
<div class="container px-5 py-24 mx-auto">
<div class="flex flex-col text-center w-full mb-20">
<h1 class="text-2xl font-medium title-font mb-4 text-gray-900 tracking-widest">
OUR TEAM
</h1>
<p class="lg:w-2/3 mx-auto leading-relaxed text-base">Six months in and the velocity is hard to believe. We went from a feature every two weeks to a feature every two days.</p>
</div>
<div class="flex flex-wrap -m-4">
<div class="p-4 lg:w-1/2">
<div class="h-full flex sm:flex-row flex-col items-center sm:justify-start justify-center text-center sm:text-left">
<img
alt="team"
class="flex-shrink-0 rounded-lg w-48 h-48 object-cover object-center sm:mb-0 mb-4"
src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&q=80&w=200&h=200"
/>
<div class="flex-grow sm:pl-8">
<h2 class="title-font font-medium text-lg text-gray-900">
Casey Morgan
</h2>
<h3 class="text-gray-500 mb-3">UI Developer</h3>
<p class="mb-4">
DIY tote bag drinking vinegar cronut adaptogen squid fanny
pack vaporware.
</p>
<span class="inline-flex">
<a class="text-gray-500">
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
class="w-5 h-5"
viewBox="0 0 24 24"
>
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
</svg>
</a>
<a class="ml-2 text-gray-500">
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
class="w-5 h-5"
viewBox="0 0 24 24"
>
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
</svg>
</a>
<a class="ml-2 text-gray-500">
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
class="w-5 h-5"
viewBox="0 0 24 24"
>
<path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" />
</svg>
</a>
</span>
</div>
</div>
</div>
<div class="p-4 lg:w-1/2">
<div class="h-full flex sm:flex-row flex-col items-center sm:justify-start justify-center text-center sm:text-left">
<img
alt="team"
class="flex-shrink-0 rounded-lg w-48 h-48 object-cover object-center sm:mb-0 mb-4"
src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?auto=format&fit=crop&q=80&w=201&h=201"
/>
<div class="flex-grow sm:pl-8">
<h2 class="title-font font-medium text-lg text-gray-900">
Alper Kamu
</h2>
<h3 class="text-gray-500 mb-3">Designer</h3>
<p class="mb-4">
DIY tote bag drinking vinegar cronut adaptogen squid fanny
pack vaporware.
</p>
<span class="inline-flex">
<a class="text-gray-500">
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
class="w-5 h-5"
viewBox="0 0 24 24"
>
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
</svg>
</a>
<a class="ml-2 text-gray-500">
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
class="w-5 h-5"
viewBox="0 0 24 24"
>
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
</svg>
</a>
<a class="ml-2 text-gray-500">
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
class="w-5 h-5"
viewBox="0 0 24 24"
>
<path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" />
</svg>
</a>
</span>
</div>
</div>
</div>
<div class="p-4 lg:w-1/2">
<div class="h-full flex sm:flex-row flex-col items-center sm:justify-start justify-center text-center sm:text-left">
<img
alt="team"
class="flex-shrink-0 rounded-lg w-48 h-48 object-cover object-center sm:mb-0 mb-4"
src="https://images.unsplash.com/photo-1572635196237-14b3f281503f?auto=format&fit=crop&q=80&w=204&h=204"
/>
<div class="flex-grow sm:pl-8">
<h2 class="title-font font-medium text-lg text-gray-900">
Atticus Finch
</h2>
<h3 class="text-gray-500 mb-3">UI Developer</h3>
<p class="mb-4">
DIY tote bag drinking vinegar cronut adaptogen squid fanny
pack vaporware.
</p>
<span class="inline-flex">
<a class="text-gray-500">
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
class="w-5 h-5"
viewBox="0 0 24 24"
>
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
</svg>
</a>
<a class="ml-2 text-gray-500">
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
class="w-5 h-5"
viewBox="0 0 24 24"
>
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
</svg>
</a>
<a class="ml-2 text-gray-500">
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
class="w-5 h-5"
viewBox="0 0 24 24"
>
<path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" />
</svg>
</a>
</span>
</div>
</div>
</div>
<div class="p-4 lg:w-1/2">
<div class="h-full flex sm:flex-row flex-col items-center sm:justify-start justify-center text-center sm:text-left">
<img
alt="team"
class="flex-shrink-0 rounded-lg w-48 h-48 object-cover object-center sm:mb-0 mb-4"
src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?auto=format&fit=crop&q=80&w=206&h=206"
/>
<div class="flex-grow sm:pl-8">
<h2 class="title-font font-medium text-lg text-gray-900">
Henry Letham
</h2>
<h3 class="text-gray-500 mb-3">Designer</h3>
<p class="mb-4">
DIY tote bag drinking vinegar cronut adaptogen squid fanny
pack vaporware.
</p>
<span class="inline-flex">
<a class="text-gray-500">
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
class="w-5 h-5"
viewBox="0 0 24 24"
>
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
</svg>
</a>
<a class="ml-2 text-gray-500">
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
class="w-5 h-5"
viewBox="0 0 24 24"
>
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
</svg>
</a>
<a class="ml-2 text-gray-500">
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
class="w-5 h-5"
viewBox="0 0 24 24"
>
<path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" />
</svg>
</a>
</span>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>