teamBeginner
Team — Three-Column
Three-column team member grid with portraits and roles.
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: section heading, then a 3-column grid (1 / 2 / 3 by breakpoint) of team cards with square portrait, name, role, and a short bio.
Code
html
<!--
Source: Mert Cukuren (Tailblocks)
https://github.com/mertJF/tailblocks/blob/master/src/blocks/team/light/a.js
License: MIT
Surfaced via https://vibedex.io/components/tailblocks-team-light-a
-->
<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="sm:text-3xl 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">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-2">
<div class="p-2 lg:w-1/3 md:w-1/2 w-full">
<div class="h-full flex items-center border-gray-200 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=80&h=80"
/>
<div class="flex-grow">
<h2 class="text-gray-900 title-font font-medium">
Casey Morgan
</h2>
<p class="text-gray-500">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-200 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=84&h=84"
/>
<div class="flex-grow">
<h2 class="text-gray-900 title-font font-medium">
Henry Letham
</h2>
<p class="text-gray-500">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-200 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=88&h=88"
/>
<div class="flex-grow">
<h2 class="text-gray-900 title-font font-medium">
Oskar Blinde
</h2>
<p class="text-gray-500">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-200 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=90&h=90"
/>
<div class="flex-grow">
<h2 class="text-gray-900 title-font font-medium">
John Doe
</h2>
<p class="text-gray-500">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-200 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=94&h=94"
/>
<div class="flex-grow">
<h2 class="text-gray-900 title-font font-medium">
Martin Eden
</h2>
<p class="text-gray-500">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-200 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=98&h=98"
/>
<div class="flex-grow">
<h2 class="text-gray-900 title-font font-medium">
Boris Kitua
</h2>
<p class="text-gray-500">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-200 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=100&h=90"
/>
<div class="flex-grow">
<h2 class="text-gray-900 title-font font-medium">
Atticus Finch
</h2>
<p class="text-gray-500">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-200 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=104&h=94"
/>
<div class="flex-grow">
<h2 class="text-gray-900 title-font font-medium">
Alper Kamu
</h2>
<p class="text-gray-500">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-200 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=108&h=98"
/>
<div class="flex-grow">
<h2 class="text-gray-900 title-font font-medium">
Rodrigo Monchi
</h2>
<p class="text-gray-500">Product Manager</p>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>