Back to marketing components
Team Sections
Explore a curated collection of team section components built with Tailwind CSS. Display team member profiles with images, names, roles, and social links perfect for company websites and about pages.
3/3 Dark Mode Updated: Jul 4, 2026
<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 id="TeamMember1Name" 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"
aria-labelledby="TeamMember1Name LinkedInLabel1"
>
<span id="LinkedInLabel1" class="sr-only">LinkedIn</span>
<svg viewBox="0 0 20 20" fill="currentColor" class="size-7" aria-hidden="true">
<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 id="TeamMember2Name" 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"
aria-labelledby="TeamMember2Name LinkedInLabel2"
>
<span id="LinkedInLabel2" class="sr-only">LinkedIn</span>
<svg viewBox="0 0 20 20" fill="currentColor" class="size-7" aria-hidden="true">
<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 id="TeamMember3Name" 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"
aria-labelledby="TeamMember3Name LinkedInLabel3"
>
<span id="LinkedInLabel3" class="sr-only">LinkedIn</span>
<svg viewBox="0 0 20 20" fill="currentColor" class="size-7" aria-hidden="true">
<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 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
id="TeamMember1Name"
class="text-lg/tight font-semibold text-gray-900 dark:text-white"
>
Eric Johnson
</h3>
<p class="mt-0.5 text-sm text-gray-700 dark:text-gray-200">Product Designer</p>
</div>
<a
href="#"
target="_blank"
rel="noreferrer"
class="text-[#0072b1] transition-opacity hover:opacity-90 dark:text-white"
aria-labelledby="TeamMember1Name LinkedInLabel1"
>
<span id="LinkedInLabel1" class="sr-only">LinkedIn</span>
<svg viewBox="0 0 20 20" fill="currentColor" class="size-7" aria-hidden="true">
<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
id="TeamMember2Name"
class="text-lg/tight font-semibold text-gray-900 dark:text-white"
>
Eric Johnson
</h3>
<p class="mt-0.5 text-sm text-gray-700 dark:text-gray-200">Product Designer</p>
</div>
<a
href="#"
target="_blank"
rel="noreferrer"
class="text-[#0072b1] transition-opacity hover:opacity-90 dark:text-white"
aria-labelledby="TeamMember2Name LinkedInLabel2"
>
<span id="LinkedInLabel2" class="sr-only">LinkedIn</span>
<svg viewBox="0 0 20 20" fill="currentColor" class="size-7" aria-hidden="true">
<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
id="TeamMember3Name"
class="text-lg/tight font-semibold text-gray-900 dark:text-white"
>
Eric Johnson
</h3>
<p class="mt-0.5 text-sm text-gray-700 dark:text-gray-200">Product Designer</p>
</div>
<a
href="#"
target="_blank"
rel="noreferrer"
class="text-[#0072b1] transition-opacity hover:opacity-90 dark:text-white"
aria-labelledby="TeamMember3Name LinkedInLabel3"
>
<span id="LinkedInLabel3" class="sr-only">LinkedIn</span>
<svg viewBox="0 0 20 20" fill="currentColor" class="size-7" aria-hidden="true">
<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 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">
<div class="flex items-center justify-between gap-4">
<div>
<h3 id="TeamMember1Name" 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"
aria-labelledby="TeamMember1Name LinkedInLabel1"
>
<span id="LinkedInLabel1" class="sr-only">LinkedIn</span>
<svg viewBox="0 0 20 20" fill="currentColor" class="size-7" aria-hidden="true">
<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>
<p class="mt-2 text-pretty text-gray-700">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, placeat facere? Iste
nostrum odio magnam?
</p>
</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">
<div class="flex items-center justify-between gap-4">
<div>
<h3 id="TeamMember2Name" 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"
aria-labelledby="TeamMember2Name LinkedInLabel2"
>
<span id="LinkedInLabel2" class="sr-only">LinkedIn</span>
<svg viewBox="0 0 20 20" fill="currentColor" class="size-7" aria-hidden="true">
<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>
<p class="mt-2 text-pretty text-gray-700">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, placeat facere? Iste
nostrum odio magnam?
</p>
</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">
<div class="flex items-center justify-between gap-4">
<div>
<h3 id="TeamMember3Name" 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"
aria-labelledby="TeamMember3Name LinkedInLabel3"
>
<span id="LinkedInLabel3" class="sr-only">LinkedIn</span>
<svg viewBox="0 0 20 20" fill="currentColor" class="size-7" aria-hidden="true">
<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>
<p class="mt-2 text-pretty text-gray-700">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, placeat facere? Iste
nostrum odio magnam?
</p>
</div>
</div>
</div>
</div><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">
<div class="flex items-center justify-between gap-4">
<div>
<h3
id="TeamMember1Name"
class="text-lg/tight font-semibold text-gray-900 dark:text-white"
>
Eric Johnson
</h3>
<p class="mt-0.5 text-sm text-gray-700 dark:text-gray-200">Product Designer</p>
</div>
<a
href="#"
target="_blank"
rel="noreferrer"
class="text-[#0072b1] transition-opacity hover:opacity-90 dark:text-white"
aria-labelledby="TeamMember1Name LinkedInLabel1"
>
<span id="LinkedInLabel1" class="sr-only">LinkedIn</span>
<svg viewBox="0 0 20 20" fill="currentColor" class="size-7" aria-hidden="true">
<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>
<p class="mt-2 text-pretty text-gray-700 dark:text-gray-200">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, placeat facere? Iste
nostrum odio magnam?
</p>
</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">
<div class="flex items-center justify-between gap-4">
<div>
<h3
id="TeamMember2Name"
class="text-lg/tight font-semibold text-gray-900 dark:text-white"
>
Eric Johnson
</h3>
<p class="mt-0.5 text-sm text-gray-700 dark:text-gray-200">Product Designer</p>
</div>
<a
href="#"
target="_blank"
rel="noreferrer"
class="text-[#0072b1] transition-opacity hover:opacity-90 dark:text-white"
aria-labelledby="TeamMember2Name LinkedInLabel2"
>
<span id="LinkedInLabel2" class="sr-only">LinkedIn</span>
<svg viewBox="0 0 20 20" fill="currentColor" class="size-7" aria-hidden="true">
<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>
<p class="mt-2 text-pretty text-gray-700 dark:text-gray-200">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, placeat facere? Iste
nostrum odio magnam?
</p>
</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">
<div class="flex items-center justify-between gap-4">
<div>
<h3
id="TeamMember3Name"
class="text-lg/tight font-semibold text-gray-900 dark:text-white"
>
Eric Johnson
</h3>
<p class="mt-0.5 text-sm text-gray-700 dark:text-gray-200">Product Designer</p>
</div>
<a
href="#"
target="_blank"
rel="noreferrer"
class="text-[#0072b1] transition-opacity hover:opacity-90 dark:text-white"
aria-labelledby="TeamMember3Name LinkedInLabel3"
>
<span id="LinkedInLabel3" class="sr-only">LinkedIn</span>
<svg viewBox="0 0 20 20" fill="currentColor" class="size-7" aria-hidden="true">
<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>
<p class="mt-2 text-pretty text-gray-700 dark:text-gray-200">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, placeat facere? Iste
nostrum odio magnam?
</p>
</div>
</div>
</div>
</div><div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
<div class="grid grid-cols-2 gap-8 sm:grid-cols-3 lg:grid-cols-6">
<div>
<img
src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160"
alt=""
class="aspect-square rounded-full object-cover"
/>
<div class="mt-4 text-center">
<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>
</div>
<div>
<img
src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160"
alt=""
class="aspect-square rounded-full object-cover"
/>
<div class="mt-4 text-center">
<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>
</div>
<div>
<img
src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160"
alt=""
class="aspect-square rounded-full object-cover"
/>
<div class="mt-4 text-center">
<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>
</div>
<div>
<img
src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160"
alt=""
class="aspect-square rounded-full object-cover"
/>
<div class="mt-4 text-center">
<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>
</div>
<div>
<img
src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160"
alt=""
class="aspect-square rounded-full object-cover"
/>
<div class="mt-4 text-center">
<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>
</div>
<div>
<img
src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160"
alt=""
class="aspect-square rounded-full object-cover"
/>
<div class="mt-4 text-center">
<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>
</div>
</div>
</div><div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
<div class="grid grid-cols-2 gap-8 sm:grid-cols-3 lg:grid-cols-6">
<div>
<img
src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160"
alt=""
class="aspect-square rounded-full object-cover"
/>
<div class="mt-4 text-center">
<h3 class="text-lg/tight font-semibold text-gray-900 dark:text-white">Eric Johnson</h3>
<p class="mt-0.5 text-sm text-gray-700 dark:text-gray-200">Product Designer</p>
</div>
</div>
<div>
<img
src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160"
alt=""
class="aspect-square rounded-full object-cover"
/>
<div class="mt-4 text-center">
<h3 class="text-lg/tight font-semibold text-gray-900 dark:text-white">Eric Johnson</h3>
<p class="mt-0.5 text-sm text-gray-700 dark:text-gray-200">Product Designer</p>
</div>
</div>
<div>
<img
src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160"
alt=""
class="aspect-square rounded-full object-cover"
/>
<div class="mt-4 text-center">
<h3 class="text-lg/tight font-semibold text-gray-900 dark:text-white">Eric Johnson</h3>
<p class="mt-0.5 text-sm text-gray-700 dark:text-gray-200">Product Designer</p>
</div>
</div>
<div>
<img
src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160"
alt=""
class="aspect-square rounded-full object-cover"
/>
<div class="mt-4 text-center">
<h3 class="text-lg/tight font-semibold text-gray-900 dark:text-white">Eric Johnson</h3>
<p class="mt-0.5 text-sm text-gray-700 dark:text-gray-200">Product Designer</p>
</div>
</div>
<div>
<img
src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160"
alt=""
class="aspect-square rounded-full object-cover"
/>
<div class="mt-4 text-center">
<h3 class="text-lg/tight font-semibold text-gray-900 dark:text-white">Eric Johnson</h3>
<p class="mt-0.5 text-sm text-gray-700 dark:text-gray-200">Product Designer</p>
</div>
</div>
<div>
<img
src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160"
alt=""
class="aspect-square rounded-full object-cover"
/>
<div class="mt-4 text-center">
<h3 class="text-lg/tight font-semibold text-gray-900 dark:text-white">Eric Johnson</h3>
<p class="mt-0.5 text-sm text-gray-700 dark:text-gray-200">Product Designer</p>
</div>
</div>
</div>
</div>