How to build a team grid section with a cta card using Tailwind CSS
Craft a responsive team grid that mixes profile cards with a central spotlight block, complete with aspect-ratio images and inline social links—all in Tailwind CSS.
Published on November 26, 2025 by Michael AndreuzzaA team section can be more than a list of headshots. This layout uses a responsive grid, a hero card in the middle, and inline social icons so every profile feels curated. Everything below is plain HTML + Tailwind CSS utilities, making it easy to drop into any Astro component.
What makes this grid feel premium
ul[role="list"]keeps semantics accessible while allowing CSS grid control.- A hero card spans two columns on large screens and reorders on mobile, acting as the grid’s focal point.
- Profile cards share the same vertical rhythm: portrait, name/role row, microcopy, then a short bio.
- Inline icons stay monochrome until hovered, maintaining a professional feel.
1. Grid skeleton and semantics
Start with an unordered list so screen readers announce the number of team members. The grid grows from one column to four at md:.
<ul role="list" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-8">
<!-- list items go here -->
</ul>gap-8gives consistent spacing between cards.- The
role="list"hint ensures announced semantics even when you reset list styles elsewhere.
2. Spotlight (hero) card
The central storytelling block lives within the same list, but spans two columns so it reads like a pull quote.
<li class="flex flex-col items-center justify-center order-first lg:col-span-2 lg:p-12 bg-linear-180 outline outline-zinc-100 from-zinc-50 to-zinc-100 rounded-xl lg:order-none">
<div class="text-center lg:text-balance">
<h2 class="text-2xl md:text-3xl lg:text-4xl font-semibold tracking-tight text-zinc-900 text-balance">
Get to know the people behind our team
</h2>
<p class="text-base mt-4 font-medium text-zinc-500">
Our talented team combines creativity, expertise, and dedication to bring innovative solutions to life and empower your projects.
</p>
</div>
</li>order-firstensures the hero stays ahead on mobile;lg:order-nonereturns it to the middle when there’s enough width.- The gradient (
bg-linear-180) and outline make it feel distinct without relying on drop-shadow.
3. Profile cards with social actions
Each person card is a flex column: image → meta block → bio. Social links are inline icons that change color on hover.
<li>
<div class="flex flex-col gap-4">
<img class="object-cover rounded-xl aspect-[4/3]" src="/avatars/1.jpg" alt="#_" />
<div>
<div class="flex items-center justify-between">
<h3 class="text-base font-semibold text-zinc-900">Michael Andreuzza</h3>
<div class="flex items-center gap-2">
<a class="text-base font-medium hover:text-blue-500 text-zinc-500" href="#_">
<!-- X icon -->
</a>
<a class="text-base font-medium hover:text-blue-500 text-zinc-500" href="#_">
<!-- LinkedIn icon -->
</a>
</div>
</div>
<p class="text-xs font-medium text-zinc-500">Creator of Oxbow UI.com</p>
<p class="text-sm mt-4 font-medium text-zinc-500">
Michael is a visionary leader with over a decade of experience in creating dynamic and user-friendly websites.
</p>
</div>
</div>
</li>aspect-[4/3]keeps portraits consistent, even with differing source ratios.gap-4ensures breathing room between the photo and copy.
4. SVG icon treatment
The icons are inline <svg> elements to avoid external sprite dependencies. All share the size-4 (1rem) utility and inherit the surrounding text color.
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler-layout-brand-linkedin size-4"
>
<!-- paths -->
</svg>currentColorkeeps hover states in sync with the link color.- Include
aria-hidden="true"or readablearia-labelon the link depending on your accessibility goals.
5. Copy-and-paste snippet
Drop the entire markup below into any Astro component. The section doesn’t require JavaScript—just Tailwind CSS.
<ul role="list" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-8">
<li>
<div class="flex flex-col gap-4">
<img
class="object-cover rounded-xl aspect-[4/3]"
src="/avatars/1.jpg"
alt="#_"
/>
<div>
<div class="flex items-center justify-between">
<h3 class="text-base font-semibold text-zinc-900">
Michael Andreuzza
</h3>
<div class="flex items-center gap-2">
<a
class="text-base font-medium hover:text-blue-500 text-zinc-500"
href="#_"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler-layout-brand-x size-4"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M4 4l11.733 16h4.267l-11.733 -16z"></path>
<path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772"></path>
</svg>
</a>
<a
class="text-base font-medium hover:text-blue-500 text-zinc-500"
href="#_"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler-layout-brand-linkedin size-4"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"
></path>
<path d="M8 11l0 5"></path>
<path d="M8 8l0 .01"></path>
<path d="M12 16l0 -5"></path>
<path d="M16 16v-3a2 2 0 0 0 -4 0"></path>
</svg>
</a>
</div>
</div>
<p class="text-xs font-medium text-zinc-500">Creator of Oxbow UI.com</p>
<p class="text-sm mt-4 font-medium text-zinc-500">
Michael is a visionary leader with over a decade of experience in
creating dynamic and user-friendly websites.
</p>
</div>
</div>
</li>
<li
class="flex flex-col items-center justify-center order-first lg:col-span-2 lg:p-12 bg-linear-180 outline outline-zinc-100 from-zinc-50 to-zinc-100 rounded-xl lg:order-none"
>
<div class="text-center lg:text-balance">
<h2
class="text-2xl md:text-3xl lg:text-4xl font-semibold tracking-tight text-zinc-900 text-balance"
>
Get to know the people behind our team
</h2>
<p class="text-base mt-4 font-medium text-zinc-500">
Our talented team combines creativity, expertise, and dedication to
bring innovative solutions to life and empower your projects.
</p>
</div>
</li>
<li>
<div class="flex flex-col gap-4">
<img
class="object-cover rounded-xl aspect-[4/3]"
src="/avatars/2.jpg"
alt="#_"
/>
<div>
<div class="flex items-center justify-between">
<h3 class="text-base font-semibold text-zinc-900">Juan Echanove</h3>
<div class="flex items-center gap-2">
<a
class="text-base font-medium hover:text-blue-500 text-zinc-500"
href="#_"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler-layout-brand-x size-4"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M4 4l11.733 16h4.267l-11.733 -16z"></path>
<path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772"></path>
</svg>
</a>
<a
class="text-base font-medium hover:text-blue-500 text-zinc-500"
href="#_"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler-layout-brand-linkedin size-4"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"
></path>
<path d="M8 11l0 5"></path>
<path d="M8 8l0 .01"></path>
<path d="M12 16l0 -5"></path>
<path d="M16 16v-3a2 2 0 0 0 -4 0"></path>
</svg>
</a>
</div>
</div>
<p class="text-xs font-medium text-zinc-500">Founder of Pay Oneeer</p>
<p class="text-sm mt-4 font-medium text-zinc-500">
Juan is the founder of Pay Oneeer, a leading fintech company and deep
understanding of financial technology.
</p>
</div>
</div>
</li>
<li class="lg:col-span-2">
<div class="flex flex-col gap-4">
<img
class="object-cover rounded-xl aspect-[4/3]"
src="/avatars/3.jpg"
alt="#_"
/>
<div>
<div class="flex items-center justify-between">
<h3 class="text-base font-semibold text-zinc-900">Anna Muska</h3>
<div class="flex items-center gap-2">
<a
class="text-base font-medium hover:text-blue-500 text-zinc-500"
href="#_"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler-layout-brand-x size-4"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M4 4l11.733 16h4.267l-11.733 -16z"></path>
<path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772"></path>
</svg>
</a>
<a
class="text-base font-medium hover:text-blue-500 text-zinc-500"
href="#_"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler-layout-brand-linkedin size-4"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"
></path>
<path d="M8 11l0 5"></path>
<path d="M8 8l0 .01"></path>
<path d="M12 16l0 -5"></path>
<path d="M16 16v-3a2 2 0 0 0 -4 0"></path>
</svg>
</a>
</div>
</div>
<p class="text-xs font-medium text-zinc-500">Founder of Fesla</p>
<p class="text-sm mt-4 font-medium text-zinc-500">
Elona is a trailblazing entrepreneur and the founder of Fesla, an
innovative company pushing the boundaries of technology and
sustainability. She is committed to driving change and making a
positive impact on the world.
</p>
</div>
</div>
</li>
<li class="lg:col-span-2">
<div class="flex flex-col gap-4">
<img
class="object-cover rounded-xl aspect-[4/3]"
src="/avatars/4.jpg"
alt="#_"
/>
<div>
<div class="flex items-center justify-between">
<h3 class="text-base font-semibold text-zinc-900">Heidi Herrera</h3>
<div class="flex items-center gap-2">
<a
class="text-base font-medium hover:text-blue-500 text-zinc-500"
href="#_"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler-layout-brand-x size-4"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M4 4l11.733 16h4.267l-11.733 -16z"></path>
<path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772"></path>
</svg>
</a>
<a
class="text-base font-medium hover:text-blue-500 text-zinc-500"
href="#_"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler-layout-brand-linkedin size-4"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"
></path>
<path d="M8 11l0 5"></path>
<path d="M8 8l0 .01"></path>
<path d="M12 16l0 -5"></path>
<path d="M16 16v-3a2 2 0 0 0 -4 0"></path>
</svg>
</a>
</div>
</div>
<p class="text-xs font-medium text-zinc-500">COO at Pff Inc</p>
<p class="text-sm mt-4 font-medium text-zinc-500">
Messina is the Chief Operating Officer at Pff Inc. With a keen eye for
detail and exceptional organizational skills, she ensures the smooth
and efficient operation of the company, driving growth and success.
</p>
</div>
</div>
</li>
</ul>Finishing touches
- Swap placeholder
href="#_"values with actual profile links and addaria-label="Visit Michael’s LinkedIn"for clarity. - Tailor the list length by duplicating
<li>blocks; the grid auto-wraps across rows. - If you need darker themes, trade
text-zinc-900/zinc-500pairs for the appropriate palette tokens.
/Michael Andreuzza