Sarah leads our company with over 10 years of experience in technology and business development. She's passionate about creating innovative solutions.
Team Sections
Showcase your team members with profile cards featuring photos, names, roles, and social links.
3 COMPONENT VARIATIONS
Card-Based Team Layout
Team members displayed in elegant cards with detailed information and social links.
View
Grid Team Layout
A clean grid layout showcasing team members with photos, names, roles, and social links.
View
Team with Background
Team section with a colored background and prominent social media integration.
View
Card-Based Team Layout
Team members displayed in elegant cards with detailed information and social links.
Meet our leadership
We're a dynamic group of individuals who are passionate about what we do and dedicated to delivering the best results for our clients.
Michael brings deep technical expertise and vision to our platform. He's responsible for our technology strategy and engineering excellence.
Emily leads our design team with a focus on user experience and interface design. She ensures our products are both beautiful and functional.
Component Code
<div class="bg-gray-50 py-24">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl text-center">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">Meet our leadership</h2>
<p class="mt-6 text-lg leading-8 text-gray-600">
We're a dynamic group of individuals who are passionate about what we do and dedicated to delivering the best
results for our clients.
</p>
</div>
<div class="mx-auto mt-20 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-3">
<article class="flex flex-col items-center justify-between bg-white rounded-2xl p-8 border border-gray-200">
<div class="flex items-center gap-x-4 text-xs">
<time datetime="2020-03-16" class="text-gray-500">Co-Founder</time>
<a href="#"
class="relative z-10 rounded-full bg-cyan-50 px-3 py-1.5 font-medium text-cyan-700 hover:bg-cyan-100">Leadership</a>
</div>
<div class="group relative mt-6">
<div class="relative h-48 w-48 mx-auto rounded-full overflow-hidden">
<img class="h-full w-full object-cover" src="https://randomuser.me/api/portraits/women/64.jpg" alt="Sarah Johnson">
</div>
<h3 class="mt-6 text-lg font-semibold leading-6 text-gray-900 text-center">
<a href="#">
<span class="absolute inset-0"></span>
Sarah Johnson
</a>
</h3>
<p class="mt-3 text-sm leading-6 text-gray-600 text-center">CEO & Co-Founder</p>
</div>
<div class="relative mt-6 flex items-center gap-x-4 w-full">
<div class="text-sm leading-6 flex-1">
<p class="text-gray-600">
Sarah leads our company with over 10 years of experience in technology and business development. She's
passionate about creating innovative solutions.
</p>
</div>
</div>
<div class="mt-6 flex justify-center space-x-6 w-full">
<a href="#" class="text-gray-400 hover:text-cyan-700">
<span class="sr-only">LinkedIn</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd"
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"
clipRule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-cyan-700">
<span class="sr-only">Twitter</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20">
<path
d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84" />
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-cyan-700">
<span class="sr-only">GitHub</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd"
d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z"
clipRule="evenodd" />
</svg>
</a>
</div>
</article>
<article class="flex flex-col items-center justify-between bg-white rounded-2xl p-8 border border-gray-200">
<div class="flex items-center gap-x-4 text-xs">
<time datetime="2020-03-16" class="text-gray-500">Co-Founder</time>
<a href="#"
class="relative z-10 rounded-full bg-cyan-50 px-3 py-1.5 font-medium text-cyan-700 hover:bg-cyan-100">Technology</a>
</div>
<div class="group relative mt-6">
<div class="relative h-48 w-48 mx-auto rounded-full overflow-hidden">
<img class="h-full w-full object-cover" src="https://randomuser.me/api/portraits/men/74.jpg" alt="Michael Chen">
</div>
<h3 class="mt-6 text-lg font-semibold leading-6 text-gray-900 text-center">
<a href="#">
<span class="absolute inset-0"></span>
Michael Chen
</a>
</h3>
<p class="mt-3 text-sm leading-6 text-gray-600 text-center">CTO & Co-Founder</p>
</div>
<div class="relative mt-6 flex items-center gap-x-4 w-full">
<div class="text-sm leading-6 flex-1">
<p class="text-gray-600">
Michael brings deep technical expertise and vision to our platform. He's responsible for our technology
strategy and engineering excellence.
</p>
</div>
</div>
<div class="mt-6 flex justify-center space-x-6 w-full">
<a href="#" class="text-gray-400 hover:text-cyan-700">
<span class="sr-only">LinkedIn</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd"
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"
clipRule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-cyan-700">
<span class="sr-only">Twitter</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20">
<path
d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84" />
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-cyan-700">
<span class="sr-only">GitHub</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd"
d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z"
clipRule="evenodd" />
</svg>
</a>
</div>
</article>
<article class="flex flex-col items-center justify-between bg-white rounded-2xl p-8 border border-gray-200">
<div class="flex items-center gap-x-4 text-xs">
<time datetime="2020-03-16" class="text-gray-500">Head of Design</time>
<a href="#"
class="relative z-10 rounded-full bg-cyan-50 px-3 py-1.5 font-medium text-cyan-700 hover:bg-cyan-100">Design</a>
</div>
<div class="group relative mt-6">
<div class="relative h-48 w-48 mx-auto rounded-full overflow-hidden">
<img class="h-full w-full object-cover" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emily Rodriguez">
</div>
<h3 class="mt-6 text-lg font-semibold leading-6 text-gray-900 text-center">
<a href="#">
<span class="absolute inset-0"></span>
Emily Rodriguez
</a>
</h3>
<p class="mt-3 text-sm leading-6 text-gray-600 text-center">Head of Design</p>
</div>
<div class="relative mt-6 flex items-center gap-x-4 w-full">
<div class="text-sm leading-6 flex-1">
<p class="text-gray-600">
Emily leads our design team with a focus on user experience and interface design. She ensures our products
are both beautiful and functional.
</p>
</div>
</div>
<div class="mt-6 flex justify-center space-x-6 w-full">
<a href="#" class="text-gray-400 hover:text-cyan-700">
<span class="sr-only">LinkedIn</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd"
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"
clipRule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-cyan-700">
<span class="sr-only">Twitter</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20">
<path
d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84" />
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-cyan-700">
<span class="sr-only">Dribbble</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd"
d="M10 0C4.477 0 0 4.484 0 10.017c0 5.533 4.477 10.017 10 10.017s10-4.484 10-10.017C20 4.484 15.523 0 10 0zm6.452 4.831c1.364 1.668 2.201 3.791 2.201 6.126 0 .274-.012.541-.037.804-1.048-.223-2.315-.347-3.766-.347-1.98 0-3.766.347-5.266.804-.223-.541-.446-1.083-.669-1.624 1.364-.446 2.728-.892 4.092-1.338.669-.223 1.338-.446 2.007-.669.223-.074.446-.149.669-.223.223-.074.446-.149.669-.223.223-.074.446-.149.669-.223z"
clipRule="evenodd" />
</svg>
</a>
</div>
</article>
</div>
</div>
</div>Grid Team Layout
A clean grid layout showcasing team members with photos, names, roles, and social links.
Component Code
<div class="bg-white py-24">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:mx-0">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">Our team</h2>
<p class="mt-6 text-lg leading-8 text-gray-600">
We're a dynamic group of individuals who are passionate about what we do and dedicated to delivering the best results for our clients.
</p>
</div>
<ul role="list" class="mx-auto mt-20 grid max-w-2xl grid-cols-2 gap-x-8 gap-y-16 text-center sm:grid-cols-3 md:grid-cols-4 lg:mx-0 lg:max-w-none">
<li>
<div class="mx-auto h-24 w-24 rounded-full overflow-hidden">
<img class="h-full w-full object-cover" src="https://randomuser.me/api/portraits/women/64.jpg" alt="Sarah Johnson">
</div>
<h3 class="mt-6 text-base font-semibold leading-7 tracking-tight text-gray-900">Sarah Johnson</h3>
<p class="text-sm leading-6 text-gray-600">Co-Founder / CEO</p>
<div class="mt-3 flex justify-center space-x-3">
<a href="#" class="text-gray-400 hover:text-cyan-700">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" 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" clipRule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-cyan-700">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84" />
</svg>
</a>
</div>
</li>
<li>
<div class="mx-auto h-24 w-24 rounded-full overflow-hidden">
<img class="h-full w-full object-cover" src="https://randomuser.me/api/portraits/men/74.jpg" alt="Michael Chen">
</div>
<h3 class="mt-6 text-base font-semibold leading-7 tracking-tight text-gray-900">Michael Chen</h3>
<p class="text-sm leading-6 text-gray-600">Co-Founder / CTO</p>
<div class="mt-3 flex justify-center space-x-3">
<a href="#" class="text-gray-400 hover:text-cyan-700">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" 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" clipRule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-cyan-700">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clipRule="evenodd" />
</svg>
</a>
</div>
</li>
<li>
<div class="mx-auto h-24 w-24 rounded-full overflow-hidden">
<img class="h-full w-full object-cover" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emily Rodriguez">
</div>
<h3 class="mt-6 text-base font-semibold leading-7 tracking-tight text-gray-900">Emily Rodriguez</h3>
<p class="text-sm leading-6 text-gray-600">Head of Design</p>
<div class="mt-3 flex justify-center space-x-3">
<a href="#" class="text-gray-400 hover:text-cyan-700">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" 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" clipRule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-cyan-700">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clipRule="evenodd" />
</svg>
</a>
</div>
</li>
<li>
<div class="mx-auto h-24 w-24 rounded-full overflow-hidden">
<img class="h-full w-full object-cover" src="https://randomuser.me/api/portraits/men/64.jpg" alt="David Kim">
</div>
<h3 class="mt-6 text-base font-semibold leading-7 tracking-tight text-gray-900">David Kim</h3>
<p class="text-sm leading-6 text-gray-600">Senior Developer</p>
<div class="mt-3 flex justify-center space-x-3">
<a href="#" class="text-gray-400 hover:text-cyan-700">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" 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" clipRule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-cyan-700">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clipRule="evenodd" />
</svg>
</a>
</div>
</li>
</ul>
</div>
</div>Team with Background
Team section with a colored background and prominent social media integration.
Our amazing team
Meet the passionate individuals who make our company great. We're dedicated to delivering exceptional results and building lasting relationships.
-
Sarah Johnson
Co-Founder / CEO
Sarah leads our company with vision and passion. She has over 10 years of experience in technology and business development.
-
Michael Chen
Co-Founder / CTO
Michael brings deep technical expertise and innovation to our platform. He's responsible for our technology strategy and engineering excellence.
-
Emily Rodriguez
Head of Design
Emily leads our design team with a focus on user experience and interface design. She ensures our products are both beautiful and functional.
Component Code
<div class="bg-cyan-700 py-24">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl text-center">
<h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl">Our amazing team</h2>
<p class="mt-6 text-lg leading-8 text-cyan-100">
Meet the passionate individuals who make our company great. We're dedicated to delivering exceptional results and building lasting relationships.
</p>
</div>
<ul role="list" class="mx-auto mt-20 grid max-w-2xl grid-cols-1 gap-6 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3 lg:gap-8">
<li class="rounded-2xl bg-white px-8 py-10">
<img class="mx-auto h-48 w-48 rounded-full md:h-56 md:w-56" src="https://randomuser.me/api/portraits/women/64.jpg" alt="Sarah Johnson">
<h3 class="mt-6 text-base font-semibold leading-7 tracking-tight text-gray-900">Sarah Johnson</h3>
<p class="text-sm leading-6 text-gray-600">Co-Founder / CEO</p>
<p class="mt-4 text-base leading-7 text-gray-600">Sarah leads our company with vision and passion. She has over 10 years of experience in technology and business development.</p>
<ul role="list" class="mt-6 flex justify-center gap-x-6">
<li>
<a href="#" class="text-gray-400 hover:text-cyan-700">
<span class="sr-only">Twitter</span>
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84" />
</svg>
</a>
</li>
<li>
<a href="#" class="text-gray-400 hover:text-cyan-700">
<span class="sr-only">LinkedIn</span>
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" 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" clipRule="evenodd" />
</svg>
</a>
</li>
</ul>
</li>
<li class="rounded-2xl bg-white px-8 py-10">
<img class="mx-auto h-48 w-48 rounded-full md:h-56 md:w-56" src="https://randomuser.me/api/portraits/men/74.jpg" alt="Michael Chen">
<h3 class="mt-6 text-base font-semibold leading-7 tracking-tight text-gray-900">Michael Chen</h3>
<p class="text-sm leading-6 text-gray-600">Co-Founder / CTO</p>
<p class="mt-4 text-base leading-7 text-gray-600">Michael brings deep technical expertise and innovation to our platform. He's responsible for our technology strategy and engineering excellence.</p>
<ul role="list" class="mt-6 flex justify-center gap-x-6">
<li>
<a href="#" class="text-gray-400 hover:text-cyan-700">
<span class="sr-only">Twitter</span>
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84" />
</svg>
</a>
</li>
<li>
<a href="#" class="text-gray-400 hover:text-cyan-700">
<span class="sr-only">LinkedIn</span>
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" 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" clipRule="evenodd" />
</svg>
</a>
</li>
<li>
<a href="#" class="text-gray-400 hover:text-cyan-700">
<span class="sr-only">GitHub</span>
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clipRule="evenodd" />
</svg>
</a>
</li>
</ul>
</li>
<li class="rounded-2xl bg-white px-8 py-10">
<img class="mx-auto h-48 w-48 rounded-full md:h-56 md:w-56" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emily Rodriguez">
<h3 class="mt-6 text-base font-semibold leading-7 tracking-tight text-gray-900">Emily Rodriguez</h3>
<p class="text-sm leading-6 text-gray-600">Head of Design</p>
<p class="mt-4 text-base leading-7 text-gray-600">Emily leads our design team with a focus on user experience and interface design. She ensures our products are both beautiful and functional.</p>
<ul role="list" class="mt-6 flex justify-center gap-x-6">
<li>
<a href="#" class="text-gray-400 hover:text-cyan-700">
<span class="sr-only">Twitter</span>
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84" />
</svg>
</a>
</li>
<li>
<a href="#" class="text-gray-400 hover:text-cyan-700">
<span class="sr-only">LinkedIn</span>
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" 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" clipRule="evenodd" />
</svg>
</a>
</li>
<li>
<a href="#" class="text-gray-400 hover:text-cyan-700">
<span class="sr-only">Dribbble</span>
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 5.533 4.477 10.017 10 10.017s10-4.484 10-10.017C20 4.484 15.523 0 10 0zm6.452 4.831c1.364 1.668 2.201 3.791 2.201 6.126 0 .274-.012.541-.037.804-1.048-.223-2.315-.347-3.766-.347-1.98 0-3.766.347-5.266.804-.223-.541-.446-1.083-.669-1.624 1.364-.446 2.728-.892 4.092-1.338.669-.223 1.338-.446 2.007-.669.223-.074.446-.149.669-.223.223-.074.446-.149.669-.223.223-.074.446-.149.669-.223z" clipRule="evenodd" />
</svg>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>Ready to Use These Components?
Copy the code and customize it to match your brand. These components are built with TailwindCSS and work seamlessly in any project.
Explore More Components