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-ryan-staxs-projects-fb4e0931.vercel.app/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">
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-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://dummyimage.com/80x80"
/>
<div class="flex-grow">
<h2 class="text-white title-font font-medium">
Holden Caulfield
</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://dummyimage.com/84x84"
/>
<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://dummyimage.com/88x88"
/>
<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://dummyimage.com/90x90"
/>
<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://dummyimage.com/94x94"
/>
<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://dummyimage.com/98x98"
/>
<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://dummyimage.com/100x90"
/>
<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://dummyimage.com/104x94"
/>
<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://dummyimage.com/108x98"
/>
<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>