teamBeginner
Team — Featured Bio
Larger team member cards with extended bios and social links.
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 team section with Tailwind: cards with portrait on the left, name + role + bio on the right, and a row of small social-icon links at the bottom.
Code
html
<!--
Source: Mert Cukuren (Tailblocks)
https://github.com/mertJF/tailblocks/blob/master/src/blocks/team/light/c.js
License: MIT
Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/tailblocks-team-light-c
-->
<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">
OUR TEAM
</h1>
<p class="lg:w-2/3 mx-auto leading-relaxed text-base">
Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical
gentrify, subway tile poke farm-to-table. Franzen you probably
haven't heard of them.
</p>
</div>
<div class="flex flex-wrap -m-4">
<div class="p-4 lg:w-1/4 md:w-1/2">
<div class="h-full flex flex-col items-center text-center">
<img
alt="team"
class="flex-shrink-0 rounded-lg w-full h-56 object-cover object-center mb-4"
src="https://dummyimage.com/200x200"
/>
<div class="w-full">
<h2 class="title-font font-medium text-lg text-gray-900">
Alper Kamu
</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/4 md:w-1/2">
<div class="h-full flex flex-col items-center text-center">
<img
alt="team"
class="flex-shrink-0 rounded-lg w-full h-56 object-cover object-center mb-4"
src="https://dummyimage.com/201x201"
/>
<div class="w-full">
<h2 class="title-font font-medium text-lg text-gray-900">
Holden Caulfield
</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/4 md:w-1/2">
<div class="h-full flex flex-col items-center text-center">
<img
alt="team"
class="flex-shrink-0 rounded-lg w-full h-56 object-cover object-center mb-4"
src="https://dummyimage.com/202x202"
/>
<div class="w-full">
<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/4 md:w-1/2">
<div class="h-full flex flex-col items-center text-center">
<img
alt="team"
class="flex-shrink-0 rounded-lg w-full h-56 object-cover object-center mb-4"
src="https://dummyimage.com/203x203"
/>
<div class="w-full">
<h2 class="title-font font-medium text-lg text-gray-900">
Henry Letham
</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>
</div>
</section>
</div>
</div>