teamBeginner
Team Section
A grid of team member cards with portrait, name, role, and links.
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 + intro, then a responsive grid of team cards (1/2/3/4 columns by breakpoint). Each card has a square portrait at the top, name + role below, and a row of small social icons. Used on About pages.
Code
html
<!--
Source: Mark Mead (HyperUI)
https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/marketing/team-sections/1.html
License: MIT
Surfaced via https://vibedex.io/components/hyperui-marketing-team
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
<div class=" w-full">
<div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 gap-8 md:grid-cols-3">
<div>
<img
src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160"
alt=""
class="aspect-video rounded-lg object-cover"
/>
<div class="mt-4 flex items-center justify-between gap-4">
<div>
<h3 class="text-lg/tight font-semibold text-gray-900">Eric Johnson</h3>
<p class="mt-0.5 text-sm text-gray-700">Product Designer</p>
</div>
<a
href="#"
target="_blank"
rel="noreferrer"
class="text-[#0072b1] transition-opacity hover:opacity-90"
>
<svg viewBox="0 0 20 20" fill="currentColor" class="size-7">
<path
d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z"
clip-rule="evenodd"
fill-rule="evenodd"
></path>
</svg>
</a>
</div>
</div>
<div>
<img
src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160"
alt=""
class="aspect-video rounded-lg object-cover"
/>
<div class="mt-4 flex items-center justify-between gap-4">
<div>
<h3 class="text-lg/tight font-semibold text-gray-900">Eric Johnson</h3>
<p class="mt-0.5 text-sm text-gray-700">Product Designer</p>
</div>
<a
href="#"
target="_blank"
rel="noreferrer"
class="text-[#0072b1] transition-opacity hover:opacity-90"
>
<svg viewBox="0 0 20 20" fill="currentColor" class="size-7">
<path
d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z"
clip-rule="evenodd"
fill-rule="evenodd"
></path>
</svg>
</a>
</div>
</div>
<div>
<img
src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160"
alt=""
class="aspect-video rounded-lg object-cover"
/>
<div class="mt-4 flex items-center justify-between gap-4">
<div>
<h3 class="text-lg/tight font-semibold text-gray-900">Eric Johnson</h3>
<p class="mt-0.5 text-sm text-gray-700">Product Designer</p>
</div>
<a
href="#"
target="_blank"
rel="noreferrer"
class="text-[#0072b1] transition-opacity hover:opacity-90"
>
<svg viewBox="0 0 20 20" fill="currentColor" class="size-7">
<path
d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z"
clip-rule="evenodd"
fill-rule="evenodd"
></path>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>