teamBeginner
Team — Dark Compact
Dark-mode compact team cards.
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 compact team section with Tailwind: gray-900 background, cards with circular portraits, name, and role. Tight spacing for trim About sections.
Code
html
<!--
Source: Mert Cukuren (Tailblocks)
https://github.com/mertJF/tailblocks/blob/master/src/blocks/team/dark/b.js
License: MIT
Surfaced via https://vibedex.io/components/tailblocks-team-dark-b
-->
<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 tracking-widest">
OUR TEAM
</h1>
<p class="lg:w-2/3 mx-auto leading-relaxed text-base">Honest writing, honest design. We pasted in a draft of our roadmap and it felt like the components were already part of the plan.</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-1500648767791-00dcc994a43e?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-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-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=201&h=201"
/>
<div class="flex-grow sm:pl-8">
<h2 class="title-font font-medium text-lg text-white">
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-1560769629-975ec94e6a86?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-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-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-1505740420928-5e560c06d30e?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-white">
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>