teamBeginner
Team — Dark Bios
Dark-mode team cards with extended bios and socials.
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 dark team section with Tailwind: gray-900 background, horizontal cards with portrait, name, role, bio, and small social-icon row.
Code
html
<!--
Source: Mert Cukuren (Tailblocks)
https://github.com/mertJF/tailblocks/blob/master/src/blocks/team/dark/c.js
License: MIT
Surfaced via https://vibedex.io/components/tailblocks-team-dark-c
-->
<div class="bg-gray-900 text-gray-300 min-h-screen flex items-center justify-center">
<div class="w-full">
<section class="text-gray-400 bg-gray-900 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-white">
OUR TEAM
</h1>
<p class="lg:w-2/3 mx-auto leading-relaxed text-base">Switching to this team transformed how we ship. The tooling is sharp, the people are sharper, and the work feels right every time.</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://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&q=80&w=200&h=200"
/>
<div class="w-full">
<h2 class="title-font font-medium text-lg text-white">
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-700">
<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-700">
<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-700">
<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://images.unsplash.com/photo-1560769629-975ec94e6a86?auto=format&fit=crop&q=80&w=201&h=201"
/>
<div class="w-full">
<h2 class="title-font font-medium text-lg text-white">
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-700">
<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-700">
<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-700">
<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://images.unsplash.com/photo-1505740420928-5e560c06d30e?auto=format&fit=crop&q=80&w=202&h=202"
/>
<div class="w-full">
<h2 class="title-font font-medium text-lg text-white">
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-700">
<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-700">
<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-700">
<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://images.unsplash.com/photo-1542291026-7eec264c27ff?auto=format&fit=crop&q=80&w=203&h=203"
/>
<div class="w-full">
<h2 class="title-font font-medium text-lg text-white">
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-700">
<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-700">
<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-700">
<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>