Team Sections
Ready to use Tailwind CSS Team Section Components with production-ready, copy-paste HTML code. Use them as they are, or as a starting point to build beautiful websites.
With round images
Free
<div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl sm:text-center">
<h2 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Meet our team</h2>
<p class="mx-auto mt-6 max-w-xl text-lg leading-8 text-gray-600">Get to know the passionate professionals who are committed to driving innovation and excellence in our team.</p>
</div>
<ul role="list" class="mx-auto mt-20 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-20 sm:grid-cols-2 lg:max-w-4xl xl:max-w-none">
<li class="flex flex-col items-start gap-x-10 gap-y-6 xl:flex-row">
<div class="flex-none">
<div class="relative aspect-square w-56 overflow-hidden rounded-full bg-gray-200">
<span aria-hidden="true" class="absolute inset-0 h-full w-full rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img width="400" height="400" class="h-full w-full object-cover" src="https://htmlwind.com/assets/images/portraits/jake-nackos-IF9TK5Uy-KI-unsplash.webp" alt="" />
</div>
</div>
<div class="flex-auto">
<h3 class="text-2xl font-semibold leading-9 tracking-tight text-gray-900">Emily Carter</h3>
<p class="text-lg leading-8 text-gray-600">Chief Executive Officer</p>
<p class="mt-4 text-base leading-7 text-gray-600">An expert in streamlining operations and enhancing organizational efficiency, She ensures our team performs at its best.</p>
<ul role="list" class="mt-6 flex gap-x-5">
<li>
<a class="text-gray-400 hover:text-gray-500" href="#">
<span class="sr-only">X</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor">
<path d="M14.095479,10.316482L22.286354,1h-1.940718l-7.115352,8.087682L7.551414,1H1l8.589488,12.231093L1,23h1.940717 l7.509372-8.542861L16.448587,23H23L14.095479,10.316482z M11.436522,13.338465l-0.871624-1.218704l-6.924311-9.68815h2.981339 l5.58978,7.82155l0.867949,1.218704l7.26506,10.166271h-2.981339L11.436522,13.338465z"></path>
</svg>
</a>
</li>
<li>
<a class="text-gray-400 hover:text-gray-500" href="#">
<span class="sr-only">LinkedIn</span>
<svg class="h-5 w-5" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" aria-hidden="true">
<path style="display: inline; fill-rule: evenodd; clip-rule: evenodd" d="M116.504,500.219V170.654H6.975v329.564H116.504 L116.504,500.219z M61.751,125.674c38.183,0,61.968-25.328,61.968-56.953c-0.722-32.328-23.785-56.941-61.252-56.941 C24.994,11.781,0.5,36.394,0.5,68.722c0,31.625,23.772,56.953,60.53,56.953H61.751L61.751,125.674z M177.124,500.219 c0,0,1.437-298.643,0-329.564H286.67v47.794h-0.727c14.404-22.49,40.354-55.533,99.44-55.533 c72.085,0,126.116,47.103,126.116,148.333v188.971H401.971V323.912c0-44.301-15.848-74.531-55.497-74.531 c-30.254,0-48.284,20.38-56.202,40.08c-2.897,7.012-3.602,16.861-3.602,26.711v184.047H177.124L177.124,500.219z"></path>
</svg>
</a>
</li>
</ul>
</div>
</li>
<li class="flex flex-col items-start gap-x-10 gap-y-6 xl:flex-row">
<div class="flex-none">
<div class="relative aspect-square w-56 overflow-hidden rounded-full bg-gray-200">
<span aria-hidden="true" class="absolute inset-0 h-full w-full rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img width="400" height="400" class="h-full w-full object-cover" src="https://htmlwind.com/assets/images/portraits/ian-dooley-d1UPkiFd04A-unsplash.webp" alt="" />
</div>
</div>
<div class="flex-auto">
<h3 class="text-2xl font-semibold leading-9 tracking-tight text-gray-900">David Miller</h3>
<p class="text-lg leading-8 text-gray-600">Head of Product</p>
<p class="mt-4 text-base leading-7 text-gray-600">With a strong focus on product strategy and innovation, David drives the development of user-centered solutions.</p>
<ul role="list" class="mt-6 flex gap-x-5">
<li>
<a class="text-gray-400 hover:text-gray-500" href="#">
<span class="sr-only">X</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor">
<path d="M14.095479,10.316482L22.286354,1h-1.940718l-7.115352,8.087682L7.551414,1H1l8.589488,12.231093L1,23h1.940717 l7.509372-8.542861L16.448587,23H23L14.095479,10.316482z M11.436522,13.338465l-0.871624-1.218704l-6.924311-9.68815h2.981339 l5.58978,7.82155l0.867949,1.218704l7.26506,10.166271h-2.981339L11.436522,13.338465z"></path>
</svg>
</a>
</li>
<li>
<a class="text-gray-400 hover:text-gray-500" href="#">
<span class="sr-only">LinkedIn</span>
<svg class="h-5 w-5" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" aria-hidden="true">
<path style="display: inline; fill-rule: evenodd; clip-rule: evenodd" d="M116.504,500.219V170.654H6.975v329.564H116.504 L116.504,500.219z M61.751,125.674c38.183,0,61.968-25.328,61.968-56.953c-0.722-32.328-23.785-56.941-61.252-56.941 C24.994,11.781,0.5,36.394,0.5,68.722c0,31.625,23.772,56.953,60.53,56.953H61.751L61.751,125.674z M177.124,500.219 c0,0,1.437-298.643,0-329.564H286.67v47.794h-0.727c14.404-22.49,40.354-55.533,99.44-55.533 c72.085,0,126.116,47.103,126.116,148.333v188.971H401.971V323.912c0-44.301-15.848-74.531-55.497-74.531 c-30.254,0-48.284,20.38-56.202,40.08c-2.897,7.012-3.602,16.861-3.602,26.711v184.047H177.124L177.124,500.219z"></path>
</svg>
</a>
</li>
</ul>
</div>
</li>
<li class="flex flex-col items-start gap-x-10 gap-y-6 xl:flex-row">
<div class="flex-none">
<div class="relative aspect-square w-56 overflow-hidden rounded-full bg-gray-200">
<span aria-hidden="true" class="absolute inset-0 h-full w-full rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img width="400" height="400" class="h-full w-full object-cover" src="https://htmlwind.com/assets/images/portraits/matheus-ferrero-W7b3eDUb_2I-unsplash.webp" alt="" />
</div>
</div>
<div class="flex-auto">
<h3 class="text-2xl font-semibold leading-9 tracking-tight text-gray-900">Laura Bennett</h3>
<p class="text-lg leading-8 text-gray-600">Creative Director</p>
<p class="mt-4 text-base leading-7 text-gray-600">Laura leads our creative vision, transforming innovative concepts into impactful and engaging designs.</p>
<ul role="list" class="mt-6 flex gap-x-5">
<li>
<a class="text-gray-400 hover:text-gray-500" href="#">
<span class="sr-only">X</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor">
<path d="M14.095479,10.316482L22.286354,1h-1.940718l-7.115352,8.087682L7.551414,1H1l8.589488,12.231093L1,23h1.940717 l7.509372-8.542861L16.448587,23H23L14.095479,10.316482z M11.436522,13.338465l-0.871624-1.218704l-6.924311-9.68815h2.981339 l5.58978,7.82155l0.867949,1.218704l7.26506,10.166271h-2.981339L11.436522,13.338465z"></path>
</svg>
</a>
</li>
<li>
<a class="text-gray-400 hover:text-gray-500" href="#">
<span class="sr-only">LinkedIn</span>
<svg class="h-5 w-5" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" aria-hidden="true">
<path style="display: inline; fill-rule: evenodd; clip-rule: evenodd" d="M116.504,500.219V170.654H6.975v329.564H116.504 L116.504,500.219z M61.751,125.674c38.183,0,61.968-25.328,61.968-56.953c-0.722-32.328-23.785-56.941-61.252-56.941 C24.994,11.781,0.5,36.394,0.5,68.722c0,31.625,23.772,56.953,60.53,56.953H61.751L61.751,125.674z M177.124,500.219 c0,0,1.437-298.643,0-329.564H286.67v47.794h-0.727c14.404-22.49,40.354-55.533,99.44-55.533 c72.085,0,126.116,47.103,126.116,148.333v188.971H401.971V323.912c0-44.301-15.848-74.531-55.497-74.531 c-30.254,0-48.284,20.38-56.202,40.08c-2.897,7.012-3.602,16.861-3.602,26.711v184.047H177.124L177.124,500.219z"></path>
</svg>
</a>
</li>
</ul>
</div>
</li>
<li class="flex flex-col items-start gap-x-10 gap-y-6 xl:flex-row">
<div class="flex-none">
<div class="relative aspect-square w-56 overflow-hidden rounded-full bg-gray-200">
<span aria-hidden="true" class="absolute inset-0 h-full w-full rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img width="400" height="400" class="h-full w-full object-cover" src="https://htmlwind.com/assets/images/portraits/ludovic-migneault-4uj3iZ5m084-unsplash.webp" alt="" />
</div>
</div>
<div class="flex-auto">
<h3 class="text-2xl font-semibold leading-9 tracking-tight text-gray-900">Anthony Collins</h3>
<p class="text-lg leading-8 text-gray-600">Senior Developer</p>
<p class="mt-4 text-base leading-7 text-gray-600">A seasoned developer, Anthony specializes in crafting scalable and efficient code.</p>
<ul role="list" class="mt-6 flex gap-x-5">
<li>
<a class="text-gray-400 hover:text-gray-500" href="#">
<span class="sr-only">X</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor">
<path d="M14.095479,10.316482L22.286354,1h-1.940718l-7.115352,8.087682L7.551414,1H1l8.589488,12.231093L1,23h1.940717 l7.509372-8.542861L16.448587,23H23L14.095479,10.316482z M11.436522,13.338465l-0.871624-1.218704l-6.924311-9.68815h2.981339 l5.58978,7.82155l0.867949,1.218704l7.26506,10.166271h-2.981339L11.436522,13.338465z"></path>
</svg>
</a>
</li>
<li>
<a class="text-gray-400 hover:text-gray-500" href="#">
<span class="sr-only">LinkedIn</span>
<svg class="h-5 w-5" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" aria-hidden="true">
<path style="display: inline; fill-rule: evenodd; clip-rule: evenodd" d="M116.504,500.219V170.654H6.975v329.564H116.504 L116.504,500.219z M61.751,125.674c38.183,0,61.968-25.328,61.968-56.953c-0.722-32.328-23.785-56.941-61.252-56.941 C24.994,11.781,0.5,36.394,0.5,68.722c0,31.625,23.772,56.953,60.53,56.953H61.751L61.751,125.674z M177.124,500.219 c0,0,1.437-298.643,0-329.564H286.67v47.794h-0.727c14.404-22.49,40.354-55.533,99.44-55.533 c72.085,0,126.116,47.103,126.116,148.333v188.971H401.971V323.912c0-44.301-15.848-74.531-55.497-74.531 c-30.254,0-48.284,20.38-56.202,40.08c-2.897,7.012-3.602,16.861-3.602,26.711v184.047H177.124L177.124,500.219z"></path>
</svg>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>