teamBeginner
Team — Dark Three-Column
Dark-mode team grid with 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 dark team section with Tailwind: gray-900 background, 3-column grid of cards with portraits, names, roles, short bios. White text on dark.
Code
html
<!--
Source: Mert Cukuren (Tailblocks)
https://github.com/mertJF/tailblocks/blob/master/src/blocks/team/dark/a.js
License: MIT
Surfaced via https://vibedex.io/components/tailblocks-team-dark-a
-->
<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="sm:text-3xl 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">Not every component library is built for real product work — this one is. We've shipped to production with zero regrets.</p>
</div>
<div class="flex flex-wrap -m-2">
<div class="p-2 lg:w-1/3 md:w-1/2 w-full">
<div class="h-full flex items-center border-gray-800 border p-4 rounded-lg">
<img
alt="team"
class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4"
src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&q=80&w=80&h=80"
/>
<div class="flex-grow">
<h2 class="text-white title-font font-medium">
Casey Morgan
</h2>
<p class="text-gray-600">UI Designer</p>
</div>
</div>
</div>
<div class="p-2 lg:w-1/3 md:w-1/2 w-full">
<div class="h-full flex items-center border-gray-800 border p-4 rounded-lg">
<img
alt="team"
class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4"
src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&q=80&w=84&h=84"
/>
<div class="flex-grow">
<h2 class="text-white title-font font-medium">
Henry Letham
</h2>
<p class="text-gray-600">CTO</p>
</div>
</div>
</div>
<div class="p-2 lg:w-1/3 md:w-1/2 w-full">
<div class="h-full flex items-center border-gray-800 border p-4 rounded-lg">
<img
alt="team"
class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4"
src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&q=80&w=88&h=88"
/>
<div class="flex-grow">
<h2 class="text-white title-font font-medium">
Oskar Blinde
</h2>
<p class="text-gray-600">Founder</p>
</div>
</div>
</div>
<div class="p-2 lg:w-1/3 md:w-1/2 w-full">
<div class="h-full flex items-center border-gray-800 border p-4 rounded-lg">
<img
alt="team"
class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4"
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&q=80&w=90&h=90"
/>
<div class="flex-grow">
<h2 class="text-white title-font font-medium">John Doe</h2>
<p class="text-gray-600">DevOps</p>
</div>
</div>
</div>
<div class="p-2 lg:w-1/3 md:w-1/2 w-full">
<div class="h-full flex items-center border-gray-800 border p-4 rounded-lg">
<img
alt="team"
class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4"
src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&q=80&w=94&h=94"
/>
<div class="flex-grow">
<h2 class="text-white title-font font-medium">
Martin Eden
</h2>
<p class="text-gray-600">Software Engineer</p>
</div>
</div>
</div>
<div class="p-2 lg:w-1/3 md:w-1/2 w-full">
<div class="h-full flex items-center border-gray-800 border p-4 rounded-lg">
<img
alt="team"
class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4"
src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&q=80&w=98&h=98"
/>
<div class="flex-grow">
<h2 class="text-white title-font font-medium">
Boris Kitua
</h2>
<p class="text-gray-600">UX Researcher</p>
</div>
</div>
</div>
<div class="p-2 lg:w-1/3 md:w-1/2 w-full">
<div class="h-full flex items-center border-gray-800 border p-4 rounded-lg">
<img
alt="team"
class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4"
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&q=80&w=100&h=90"
/>
<div class="flex-grow">
<h2 class="text-white title-font font-medium">
Atticus Finch
</h2>
<p class="text-gray-600">QA Engineer</p>
</div>
</div>
</div>
<div class="p-2 lg:w-1/3 md:w-1/2 w-full">
<div class="h-full flex items-center border-gray-800 border p-4 rounded-lg">
<img
alt="team"
class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4"
src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&q=80&w=104&h=94"
/>
<div class="flex-grow">
<h2 class="text-white title-font font-medium">
Alper Kamu
</h2>
<p class="text-gray-600">System</p>
</div>
</div>
</div>
<div class="p-2 lg:w-1/3 md:w-1/2 w-full">
<div class="h-full flex items-center border-gray-800 border p-4 rounded-lg">
<img
alt="team"
class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4"
src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&q=80&w=108&h=98"
/>
<div class="flex-grow">
<h2 class="text-white title-font font-medium">
Rodrigo Monchi
</h2>
<p class="text-gray-600">Product Manager</p>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>