What layouts are available?

Photo grids, profile cards with social icons, leadership spotlight sections, and a compact name-and-role list style.

Can I link to LinkedIn or Twitter?

Yes. Most card layouts have placeholder social icon links, just swap the href values with actual profile URLs.

How do I use real photos?

Replace the img src attributes with your photo URLs. The components use object-cover and a fixed aspect ratio so photos crop consistently without you having to worry about dimensions.

What if I have an odd number of team members?

That's fine. Tailwind grid layouts handle uneven numbers gracefully, the last row just won't be full. Looks totally normal.

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.

Putting your team on the page is a small thing that makes a real difference, it makes your company feel human rather than faceless. We have a few layouts: a simple photo and name grid, profile cards with role and social links, a leadership spotlight format for a smaller team, and a compact text-only list. They all use placeholder images you can swap out. Works fine whether you have three people or thirty.

Tailwind

With round images

<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>

Grid with small round images

<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 lg:max-w-4xl xl:mx-0 xl:max-w-none">
          <div class="max-w-2xl">
            <h2 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Meet our team</h2>
            <p class="mt-6 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>
        </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 sm:gap-y-20 lg:max-w-4xl lg:grid-cols-3 xl:max-w-none xl:grid-cols-4">
          <li>
            <div class="relative aspect-square w-28 overflow-hidden rounded-full bg-gray-200">
              <span aria-hidden="true" class="ring-inset absolute inset-0 h-full w-full rounded-full ring-1 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>
            <h3 class="mt-5 text-lg font-semibold leading-8 tracking-tight text-gray-900">Emily Carter</h3>
            <p class="text-base leading-7 text-gray-600">Chief Executive Officer</p>
            <p class="mt-2 text-base leading-7 text-gray-600">An expert in streamlining operations and optimizing team performance.</p>
            <ul role="list" class="mt-4 flex items-center gap-x-4">
              <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>
          </li>
          <li>
            <div class="relative aspect-square w-28 overflow-hidden rounded-full bg-gray-200">
              <span aria-hidden="true" class="ring-inset absolute inset-0 h-full w-full rounded-full ring-1 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>
            <h3 class="mt-5 text-lg font-semibold leading-8 tracking-tight text-gray-900">David Miller</h3>
            <p class="text-base leading-7 text-gray-600">Head of Product</p>
            <p class="mt-2 text-base leading-7 text-gray-600">Focuses on product development strategy to meet customer needs.</p>
            <ul role="list" class="mt-4 flex items-center gap-x-4">
              <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>
          </li>
          <li>
            <div class="relative aspect-square w-28 overflow-hidden rounded-full bg-gray-200">
              <span aria-hidden="true" class="ring-inset absolute inset-0 h-full w-full rounded-full ring-1 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>
            <h3 class="mt-5 text-lg font-semibold leading-8 tracking-tight text-gray-900">Laura Bennett</h3>
            <p class="text-base leading-7 text-gray-600">Creative Director</p>
            <p class="mt-2 text-base leading-7 text-gray-600">Leads our creative team, turning ideas into engaging designs.</p>
            <ul role="list" class="mt-4 flex items-center gap-x-4">
              <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>
          </li>
          <li>
            <div class="relative aspect-square w-28 overflow-hidden rounded-full bg-gray-200">
              <span aria-hidden="true" class="ring-inset absolute inset-0 h-full w-full rounded-full ring-1 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>
            <h3 class="mt-5 text-lg font-semibold leading-8 tracking-tight text-gray-900">Anthony Collins</h3>
            <p class="text-base leading-7 text-gray-600">Senior Developer</p>
            <p class="mt-2 text-base leading-7 text-gray-600">Specializes in building scalable, efficient code for robust solutions.</p>
            <ul role="list" class="mt-4 flex items-center gap-x-4">
              <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>
          </li>
          <li>
            <div class="relative aspect-square w-28 overflow-hidden rounded-full bg-gray-200">
              <span aria-hidden="true" class="ring-inset absolute inset-0 h-full w-full rounded-full ring-1 ring-gray-900/10"></span>
              <img width="400" height="400" class="h-full w-full object-cover" src="https://htmlwind.com/assets/images/portraits/tamara-bellis-eDVQwVMLMgU-unsplash.webp" alt="" />
            </div>
            <h3 class="mt-5 text-lg font-semibold leading-8 tracking-tight text-gray-900">Ella Parker</h3>
            <p class="text-base leading-7 text-gray-600">Chief Operating Officer</p>
            <p class="mt-2 text-base leading-7 text-gray-600">Expert in optimizing operations and boosting team efficiency.</p>
            <ul role="list" class="mt-4 flex items-center gap-x-4">
              <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>
          </li>
          <li>
            <div class="relative aspect-square w-28 overflow-hidden rounded-full bg-gray-200">
              <span aria-hidden="true" class="ring-inset absolute inset-0 h-full w-full rounded-full ring-1 ring-gray-900/10"></span>
              <img width="400" height="400" class="h-full w-full object-cover" src="https://htmlwind.com/assets/images/portraits/filip-baotic-6fQ3I_rjuVo-unsplash.webp" alt="" />
            </div>
            <h3 class="mt-5 text-lg font-semibold leading-8 tracking-tight text-gray-900">Lucas Green</h3>
            <p class="text-base leading-7 text-gray-600">Customer Success</p>
            <p class="mt-2 text-base leading-7 text-gray-600">Develops and executes strategies to meet customer needs.</p>
            <ul role="list" class="mt-4 flex items-center gap-x-4">
              <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>
          </li>
          <li>
            <div class="relative aspect-square w-28 overflow-hidden rounded-full bg-gray-200">
              <span aria-hidden="true" class="ring-inset absolute inset-0 h-full w-full rounded-full ring-1 ring-gray-900/10"></span>
              <img width="400" height="400" class="h-full w-full object-cover" src="https://htmlwind.com/assets/images/portraits/michael-dam-mEZ3PoFGs_k-unsplash.webp" alt="" />
            </div>
            <h3 class="mt-5 text-lg font-semibold leading-8 tracking-tight text-gray-900">Mia Thompson</h3>
            <p class="text-base leading-7 text-gray-600">Design Lead</p>
            <p class="mt-2 text-base leading-7 text-gray-600">Turns innovative ideas into impactful and memorable designs.</p>
            <ul role="list" class="mt-4 flex items-center gap-x-4">
              <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>
          </li>
          <li>
            <div class="relative aspect-square w-28 overflow-hidden rounded-full bg-gray-200">
              <span aria-hidden="true" class="ring-inset absolute inset-0 h-full w-full rounded-full ring-1 ring-gray-900/10"></span>
              <img width="400" height="400" class="h-full w-full object-cover" src="https://htmlwind.com/assets/images/portraits/andreas-dick-NFvE9aO0XhU-unsplash.webp" alt="" />
            </div>
            <h3 class="mt-5 text-lg font-semibold leading-8 tracking-tight text-gray-900">Noah Harris</h3>
            <p class="text-base leading-7 text-gray-600">Backend Developer</p>
            <p class="mt-2 text-base leading-7 text-gray-600">Creates scalable and efficient code for robust solutions.</p>
            <ul role="list" class="mt-4 flex items-center gap-x-4">
              <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>
          </li>
        </ul>
      </div>
    </div>

With large images

<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-16 sm:grid-cols-2 lg:max-w-4xl lg:grid-cols-3 xl:max-w-none xl:grid-cols-4">
          <li>
            <div class="aspect-[4/5] w-full overflow-clip rounded-2xl bg-gray-200">
              <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>
            <h3 class="mt-6 text-xl font-semibold leading-8 tracking-tight text-gray-900">Emily Carter</h3>
            <p class="text-lg leading-8 text-gray-600">Chief Executive Officer</p>
            <ul role="list" class="mt-4 flex justify-start 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>
          </li>
          <li>
            <div class="aspect-[4/5] w-full overflow-clip rounded-2xl bg-gray-200">
              <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>
            <h3 class="mt-6 text-xl font-semibold leading-8 tracking-tight text-gray-900">David Miller</h3>
            <p class="text-lg leading-8 text-gray-600">Head of Product</p>
            <ul role="list" class="mt-4 flex justify-start 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>
          </li>
          <li>
            <div class="aspect-[4/5] w-full overflow-clip rounded-2xl bg-gray-200">
              <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>
            <h3 class="mt-6 text-xl font-semibold leading-8 tracking-tight text-gray-900">Laura Bennett</h3>
            <p class="text-lg leading-8 text-gray-600">Creative Director</p>
            <ul role="list" class="mt-4 flex justify-start 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>
          </li>
          <li>
            <div class="aspect-[4/5] w-full overflow-clip rounded-2xl bg-gray-200">
              <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>
            <h3 class="mt-6 text-xl font-semibold leading-8 tracking-tight text-gray-900">Anthony Collins</h3>
            <p class="text-lg leading-8 text-gray-600">Senior Developer</p>
            <ul role="list" class="mt-4 flex justify-start 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>
          </li>
          <li>
            <div class="aspect-[4/5] w-full overflow-clip rounded-2xl bg-gray-200">
              <img width="400" height="400" class="h-full w-full object-cover" src="https://htmlwind.com/assets/images/portraits/tamara-bellis-eDVQwVMLMgU-unsplash.webp" alt="" />
            </div>
            <h3 class="mt-6 text-xl font-semibold leading-8 tracking-tight text-gray-900">Ella Parker</h3>
            <p class="text-lg leading-8 text-gray-600">Chief Operating Officer</p>
            <ul role="list" class="mt-4 flex justify-start 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>
          </li>
          <li>
            <div class="aspect-[4/5] w-full overflow-clip rounded-2xl bg-gray-200">
              <img width="400" height="400" class="h-full w-full object-cover" src="https://htmlwind.com/assets/images/portraits/filip-baotic-6fQ3I_rjuVo-unsplash.webp" alt="" />
            </div>
            <h3 class="mt-6 text-xl font-semibold leading-8 tracking-tight text-gray-900">Lucas Green</h3>
            <p class="text-lg leading-8 text-gray-600">Customer Success</p>
            <ul role="list" class="mt-4 flex justify-start 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>
          </li>
          <li>
            <div class="aspect-[4/5] w-full overflow-clip rounded-2xl bg-gray-200">
              <img width="400" height="400" class="h-full w-full object-cover" src="https://htmlwind.com/assets/images/portraits/michael-dam-mEZ3PoFGs_k-unsplash.webp" alt="" />
            </div>
            <h3 class="mt-6 text-xl font-semibold leading-8 tracking-tight text-gray-900">Mia Thompson</h3>
            <p class="text-lg leading-8 text-gray-600">Design Lead</p>
            <ul role="list" class="mt-4 flex justify-start 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>
          </li>
          <li>
            <div class="aspect-[4/5] w-full overflow-clip rounded-2xl bg-gray-200">
              <img width="400" height="400" class="h-full w-full object-cover" src="https://htmlwind.com/assets/images/portraits/andreas-dick-NFvE9aO0XhU-unsplash.webp" alt="" />
            </div>
            <h3 class="mt-6 text-xl font-semibold leading-8 tracking-tight text-gray-900">Noah Harris</h3>
            <p class="text-lg leading-8 text-gray-600">Backend Developer</p>
            <ul role="list" class="mt-4 flex justify-start 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>
          </li>
        </ul>
      </div>
    </div>

Grid with round images on dark

<div class="bg-gray-900 py-24 sm:py-32">
      <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="mx-auto max-w-2xl text-center">
          <h2 class="text-4xl font-semibold tracking-tight text-white sm:text-5xl">Meet our team</h2>
          <p class="mx-auto mt-6 max-w-xl text-lg leading-8 text-gray-300">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-6 sm:grid-cols-2 lg:max-w-4xl lg:grid-cols-3 lg:gap-8 xl:max-w-none xl:grid-cols-4">
          <li class="rounded-2xl bg-gray-800 px-8 py-10 text-center">
            <div class="relative mx-auto aspect-square w-28 overflow-hidden rounded-full bg-gray-600">
              <span aria-hidden="true" class="absolute inset-0 h-full w-full rounded-full ring-1 ring-inset ring-white/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>
            <h3 class="mt-5 text-lg font-semibold leading-8 tracking-tight text-white">Emily Carter</h3>
            <p class="text-base leading-7 text-gray-300">Chief Executive Officer</p>
            <ul role="list" class="mt-4 flex justify-center gap-x-4">
              <li>
                <a class="text-gray-400 hover:text-gray-300" 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-300" 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>
          </li>
          <li class="rounded-2xl bg-gray-800 px-8 py-10 text-center">
            <div class="relative mx-auto aspect-square w-28 overflow-hidden rounded-full bg-gray-600">
              <span aria-hidden="true" class="absolute inset-0 h-full w-full rounded-full ring-1 ring-inset ring-white/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>
            <h3 class="mt-5 text-lg font-semibold leading-8 tracking-tight text-white">David Miller</h3>
            <p class="text-base leading-7 text-gray-300">Head of Product</p>
            <ul role="list" class="mt-4 flex justify-center gap-x-4">
              <li>
                <a class="text-gray-400 hover:text-gray-300" 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-300" 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>
          </li>
          <li class="rounded-2xl bg-gray-800 px-8 py-10 text-center">
            <div class="relative mx-auto aspect-square w-28 overflow-hidden rounded-full bg-gray-600">
              <span aria-hidden="true" class="absolute inset-0 h-full w-full rounded-full ring-1 ring-inset ring-white/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>
            <h3 class="mt-5 text-lg font-semibold leading-8 tracking-tight text-white">Laura Bennett</h3>
            <p class="text-base leading-7 text-gray-300">Creative Director</p>
            <ul role="list" class="mt-4 flex justify-center gap-x-4">
              <li>
                <a class="text-gray-400 hover:text-gray-300" 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-300" 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>
          </li>
          <li class="rounded-2xl bg-gray-800 px-8 py-10 text-center">
            <div class="relative mx-auto aspect-square w-28 overflow-hidden rounded-full bg-gray-600">
              <span aria-hidden="true" class="absolute inset-0 h-full w-full rounded-full ring-1 ring-inset ring-white/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>
            <h3 class="mt-5 text-lg font-semibold leading-8 tracking-tight text-white">Anthony Collins</h3>
            <p class="text-base leading-7 text-gray-300">Senior Developer</p>
            <ul role="list" class="mt-4 flex justify-center gap-x-4">
              <li>
                <a class="text-gray-400 hover:text-gray-300" 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-300" 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>
          </li>
          <li class="rounded-2xl bg-gray-800 px-8 py-10 text-center">
            <div class="relative mx-auto aspect-square w-28 overflow-hidden rounded-full bg-gray-600">
              <span aria-hidden="true" class="absolute inset-0 h-full w-full rounded-full ring-1 ring-inset ring-white/10"></span>
              <img width="400" height="400" class="h-full w-full object-cover" src="https://htmlwind.com/assets/images/portraits/tamara-bellis-eDVQwVMLMgU-unsplash.webp" alt="" />
            </div>
            <h3 class="mt-5 text-lg font-semibold leading-8 tracking-tight text-white">Ella Parker</h3>
            <p class="text-base leading-7 text-gray-300">Chief Operating Officer</p>
            <ul role="list" class="mt-4 flex justify-center gap-x-4">
              <li>
                <a class="text-gray-400 hover:text-gray-300" 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-300" 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>
          </li>
          <li class="rounded-2xl bg-gray-800 px-8 py-10 text-center">
            <div class="relative mx-auto aspect-square w-28 overflow-hidden rounded-full bg-gray-600">
              <span aria-hidden="true" class="absolute inset-0 h-full w-full rounded-full ring-1 ring-inset ring-white/10"></span>
              <img width="400" height="400" class="h-full w-full object-cover" src="https://htmlwind.com/assets/images/portraits/filip-baotic-6fQ3I_rjuVo-unsplash.webp" alt="" />
            </div>
            <h3 class="mt-5 text-lg font-semibold leading-8 tracking-tight text-white">Lucas Green</h3>
            <p class="text-base leading-7 text-gray-300">Customer Success</p>
            <ul role="list" class="mt-4 flex justify-center gap-x-4">
              <li>
                <a class="text-gray-400 hover:text-gray-300" 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-300" 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>
          </li>
          <li class="rounded-2xl bg-gray-800 px-8 py-10 text-center">
            <div class="relative mx-auto aspect-square w-28 overflow-hidden rounded-full bg-gray-600">
              <span aria-hidden="true" class="absolute inset-0 h-full w-full rounded-full ring-1 ring-inset ring-white/10"></span>
              <img width="400" height="400" class="h-full w-full object-cover" src="https://htmlwind.com/assets/images/portraits/michael-dam-mEZ3PoFGs_k-unsplash.webp" alt="" />
            </div>
            <h3 class="mt-5 text-lg font-semibold leading-8 tracking-tight text-white">Mia Thompson</h3>
            <p class="text-base leading-7 text-gray-300">Design Lead</p>
            <ul role="list" class="mt-4 flex justify-center gap-x-4">
              <li>
                <a class="text-gray-400 hover:text-gray-300" 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-300" 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>
          </li>
          <li class="rounded-2xl bg-gray-800 px-8 py-10 text-center">
            <div class="relative mx-auto aspect-square w-28 overflow-hidden rounded-full bg-gray-600">
              <span aria-hidden="true" class="absolute inset-0 h-full w-full rounded-full ring-1 ring-inset ring-white/10"></span>
              <img width="400" height="400" class="h-full w-full object-cover" src="https://htmlwind.com/assets/images/portraits/andreas-dick-NFvE9aO0XhU-unsplash.webp" alt="" />
            </div>
            <h3 class="mt-5 text-lg font-semibold leading-8 tracking-tight text-white">Noah Harris</h3>
            <p class="text-base leading-7 text-gray-300">Backend Developer</p>
            <ul role="list" class="mt-4 flex justify-center gap-x-4">
              <li>
                <a class="text-gray-400 hover:text-gray-300" 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-300" 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>
          </li>
        </ul>
      </div>
    </div>

Three columns card

<div class="bg-gray-50 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-16 sm:grid-cols-2 lg:max-w-4xl xl:max-w-none xl:grid-cols-3">
          <li class="rounded-[2rem] bg-white p-6 ring-1 ring-inset ring-gray-900/10">
            <div class="aspect-sqaure w-full overflow-clip rounded-2xl bg-neutral-900/30">
              <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>
            <h3 class="mt-6 text-xl font-semibold leading-8 tracking-tight text-gray-900">Emily Carter</h3>
            <p class="text-lg leading-8 text-gray-600">Chief Executive Officer</p>
            <ul role="list" class="mt-4 flex justify-start 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>
          </li>
          <li class="rounded-[2rem] bg-white p-6 ring-1 ring-inset ring-gray-900/10">
            <div class="aspect-sqaure w-full overflow-clip rounded-2xl bg-lime-900/30">
              <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>
            <h3 class="mt-6 text-xl font-semibold leading-8 tracking-tight text-gray-900">David Miller</h3>
            <p class="text-lg leading-8 text-gray-600">Head of Product</p>
            <ul role="list" class="mt-4 flex justify-start 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>
          </li>
          <li class="rounded-[2rem] bg-white p-6 ring-1 ring-inset ring-gray-900/10">
            <div class="aspect-sqaure w-full overflow-clip rounded-2xl bg-sky-900/30">
              <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>
            <h3 class="mt-6 text-xl font-semibold leading-8 tracking-tight text-gray-900">Laura Bennett</h3>
            <p class="text-lg leading-8 text-gray-600">Creative Director</p>
            <ul role="list" class="mt-4 flex justify-start 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>
          </li>
          <li class="rounded-[2rem] bg-white p-6 ring-1 ring-inset ring-gray-900/10">
            <div class="aspect-sqaure w-full overflow-clip rounded-2xl bg-amber-900/30">
              <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>
            <h3 class="mt-6 text-xl font-semibold leading-8 tracking-tight text-gray-900">Anthony Collins</h3>
            <p class="text-lg leading-8 text-gray-600">Senior Developer</p>
            <ul role="list" class="mt-4 flex justify-start 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>
          </li>
          <li class="rounded-[2rem] bg-white p-6 ring-1 ring-inset ring-gray-900/10">
            <div class="aspect-sqaure w-full overflow-clip rounded-2xl bg-rose-900/30">
              <img width="400" height="400" class="h-full w-full object-cover" src="https://htmlwind.com/assets/images/portraits/tamara-bellis-eDVQwVMLMgU-unsplash.webp" alt="" />
            </div>
            <h3 class="mt-6 text-xl font-semibold leading-8 tracking-tight text-gray-900">Ella Parker</h3>
            <p class="text-lg leading-8 text-gray-600">Chief Operating Officer</p>
            <ul role="list" class="mt-4 flex justify-start 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>
          </li>
          <li class="rounded-[2rem] bg-white p-6 ring-1 ring-inset ring-gray-900/10">
            <div class="aspect-sqaure w-full overflow-clip rounded-2xl bg-teal-900/30">
              <img width="400" height="400" class="h-full w-full object-cover" src="https://htmlwind.com/assets/images/portraits/filip-baotic-6fQ3I_rjuVo-unsplash.webp" alt="" />
            </div>
            <h3 class="mt-6 text-xl font-semibold leading-8 tracking-tight text-gray-900">Lucas Green</h3>
            <p class="text-lg leading-8 text-gray-600">Customer Success</p>
            <ul role="list" class="mt-4 flex justify-start 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>
          </li>
        </ul>
      </div>
    </div>

Simple grid

<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 lg:mx-0">
          <h2 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Meet our team</h2>
          <p class="mt-6 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-2 gap-x-8 gap-y-16 sm:grid-cols-3 lg:max-w-none lg:grid-cols-4 xl:grid-cols-5">
          <li class="text-center">
            <div class="relative mx-auto aspect-square w-28 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>
            <h3 class="mt-5 text-lg font-semibold leading-8 tracking-tight text-gray-900">Emily Carter</h3>
            <p class="text-base leading-7 text-gray-600">Chief Executive Officer</p>
          </li>
          <li class="text-center">
            <div class="relative mx-auto aspect-square w-28 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>
            <h3 class="mt-5 text-lg font-semibold leading-8 tracking-tight text-gray-900">David Miller</h3>
            <p class="text-base leading-7 text-gray-600">Head of Product</p>
          </li>
          <li class="text-center">
            <div class="relative mx-auto aspect-square w-28 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>
            <h3 class="mt-5 text-lg font-semibold leading-8 tracking-tight text-gray-900">Laura Bennett</h3>
            <p class="text-base leading-7 text-gray-600">Creative Director</p>
          </li>
          <li class="text-center">
            <div class="relative mx-auto aspect-square w-28 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>
            <h3 class="mt-5 text-lg font-semibold leading-8 tracking-tight text-gray-900">Anthony Collins</h3>
            <p class="text-base leading-7 text-gray-600">Senior Developer</p>
          </li>
          <li class="text-center">
            <div class="relative mx-auto aspect-square w-28 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/tamara-bellis-eDVQwVMLMgU-unsplash.webp" alt="" />
            </div>
            <h3 class="mt-5 text-lg font-semibold leading-8 tracking-tight text-gray-900">Ella Parker</h3>
            <p class="text-base leading-7 text-gray-600">Chief Operating Officer</p>
          </li>
          <li class="text-center">
            <div class="relative mx-auto aspect-square w-28 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/filip-baotic-6fQ3I_rjuVo-unsplash.webp" alt="" />
            </div>
            <h3 class="mt-5 text-lg font-semibold leading-8 tracking-tight text-gray-900">Lucas Green</h3>
            <p class="text-base leading-7 text-gray-600">Customer Success</p>
          </li>
          <li class="text-center">
            <div class="relative mx-auto aspect-square w-28 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/michael-dam-mEZ3PoFGs_k-unsplash.webp" alt="" />
            </div>
            <h3 class="mt-5 text-lg font-semibold leading-8 tracking-tight text-gray-900">Mia Thompson</h3>
            <p class="text-base leading-7 text-gray-600">Design Lead</p>
          </li>
          <li class="text-center">
            <div class="relative mx-auto aspect-square w-28 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/andreas-dick-NFvE9aO0XhU-unsplash.webp" alt="" />
            </div>
            <h3 class="mt-5 text-lg font-semibold leading-8 tracking-tight text-gray-900">Noah Harris</h3>
            <p class="text-base leading-7 text-gray-600">Backend Developer</p>
          </li>
          <li class="text-center">
            <div class="relative mx-auto aspect-square w-28 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/guillaume-bolduc-wnA05v1BaNo-unsplash.webp" alt="" />
            </div>
            <h3 class="mt-5 text-lg font-semibold leading-8 tracking-tight text-gray-900">Sophia Turner</h3>
            <p class="text-base leading-7 text-gray-600">Marketing Director</p>
          </li>
          <li class="text-center">
            <div class="relative mx-auto aspect-square w-28 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/timothy-barlin-FGaknWvNbBk-unsplash.webp" alt="" />
            </div>
            <h3 class="mt-5 text-lg font-semibold leading-8 tracking-tight text-gray-900">James Wilson</h3>
            <p class="text-base leading-7 text-gray-600">Head of Sales</p>
          </li>
          <li class="text-center">
            <div class="relative mx-auto aspect-square w-28 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/roman-akhmerov-Js6Hwobewi8-unsplash.webp" alt="" />
            </div>
            <h3 class="mt-5 text-lg font-semibold leading-8 tracking-tight text-gray-900">Olivia Adams</h3>
            <p class="text-base leading-7 text-gray-600">HR Director</p>
          </li>
          <li class="text-center">
            <div class="relative mx-auto aspect-square w-28 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/itay-verchik-YmQ8TrsieE4-unsplash.webp" alt="" />
            </div>
            <h3 class="mt-5 text-lg font-semibold leading-8 tracking-tight text-gray-900">Ethan Brooks</h3>
            <p class="text-base leading-7 text-gray-600">Data Scientist</p>
          </li>
        </ul>
      </div>
    </div>

Offset single column

<div class="bg-white py-24 sm:py-32">
      <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="grid grid-cols-1 gap-x-8 gap-y-20 xl:grid-cols-5">
          <div class="max-w-2xl xl:col-span-2">
            <h2 class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">Meet our team</h2>
            <p class="mt-6 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="-mt-12 space-y-12 divide-y divide-gray-200 xl:col-span-3 xl:max-w-none">
            <li class="flex flex-col items-start gap-x-10 gap-y-6 pt-12 sm:flex-row">
              <div class="flex-none">
                <div class="aspect-[4/5] w-56 overflow-hidden rounded-2xl bg-gray-200">
                  <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="max-w-xl 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. She consistently implements strategies that drive productivity and long-term growth.</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 pt-12 sm:flex-row">
              <div class="flex-none">
                <div class="aspect-[4/5] w-56 overflow-hidden rounded-2xl bg-gray-200">
                  <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="max-w-xl 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. His leadership ensures that products not only meet market demands but also exceed customer expectations.</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 pt-12 sm:flex-row">
              <div class="flex-none">
                <div class="aspect-[4/5] w-56 overflow-hidden rounded-2xl bg-gray-200">
                  <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="max-w-xl 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. Her expertise ensures that each project resonates with the target audience and stands out in the market.</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>
    </div>

Offset grid

<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 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-20 lg:max-w-4xl xl:mx-0 xl:max-w-none xl:grid-cols-5">
          <div class="max-w-2xl xl:col-span-2">
            <h2 class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">Meet our team</h2>
            <p class="mt-6 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="grid grid-cols-1 gap-x-8 gap-y-20 sm:grid-cols-2 xl:col-span-3">
            <li>
              <div class="aspect-square w-full overflow-hidden rounded-2xl bg-gray-200">
                <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>
              <h3 class="mt-6 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>
              <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>
            </li>
            <li>
              <div class="aspect-square w-full overflow-hidden rounded-2xl bg-gray-200">
                <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>
              <h3 class="mt-6 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>
              <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>
            </li>
            <li>
              <div class="aspect-square w-full overflow-hidden rounded-2xl bg-gray-200">
                <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>
              <h3 class="mt-6 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>
              <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>
            </li>
            <li>
              <div class="aspect-square w-full overflow-hidden rounded-2xl bg-gray-200">
                <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>
              <h3 class="mt-6 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>
              <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>
            </li>
          </ul>
        </div>
      </div>
    </div>

Glassmorphism

<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-16 sm:grid-cols-2 lg:max-w-4xl xl:max-w-none xl:grid-cols-3">
          <li class="relative isolate flex aspect-[3/4] flex-col overflow-hidden rounded-[2rem] bg-gray-50 p-5">
            <img width="400" height="400" class="absolute inset-0 -z-10 h-full w-full object-cover" src="https://images.unsplash.com/photo-1614204424926-196a80bf0be8?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
            <div class="mt-auto rounded-xl bg-white/30 p-5 pb-6 ring-1 ring-inset ring-white/30 backdrop-blur-md">
              <h3 class="text-2xl font-semibold leading-9 tracking-tight text-white">Emily Carter</h3>
              <p class="text-lg leading-8 text-white">Chief Executive Officer</p>
              <ul role="list" class="mt-6 flex justify-start gap-x-5">
                <li>
                  <a class="text-white hover:text-gray-300" 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-white hover:text-gray-300" 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="relative isolate flex aspect-[3/4] flex-col overflow-hidden rounded-[2rem] bg-gray-50 p-5">
            <img width="400" height="400" class="absolute inset-0 -z-10 h-full w-full object-cover" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
            <div class="mt-auto rounded-xl bg-white/30 p-5 pb-6 ring-1 ring-inset ring-white/30 backdrop-blur-md">
              <h3 class="text-2xl font-semibold leading-9 tracking-tight text-white">David Miller</h3>
              <p class="text-lg leading-8 text-white">Head of Product</p>
              <ul role="list" class="mt-6 flex justify-start gap-x-5">
                <li>
                  <a class="text-white hover:text-gray-300" 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-white hover:text-gray-300" 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="relative isolate flex aspect-[3/4] flex-col overflow-hidden rounded-[2rem] bg-gray-50 p-5">
            <img width="400" height="400" class="absolute inset-0 -z-10 h-full w-full object-cover" src="https://images.unsplash.com/photo-1532073150508-0c1df022bdd1?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
            <div class="mt-auto rounded-xl bg-white/30 p-5 pb-6 ring-1 ring-inset ring-white/30 backdrop-blur-md">
              <h3 class="text-2xl font-semibold leading-9 tracking-tight text-white">Sophia Turner</h3>
              <p class="text-lg leading-8 text-white">Marketing Director</p>
              <ul role="list" class="mt-6 flex justify-start gap-x-5">
                <li>
                  <a class="text-white hover:text-gray-300" 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-white hover:text-gray-300" 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="relative isolate flex aspect-[3/4] flex-col overflow-hidden rounded-[2rem] bg-gray-50 p-5">
            <img width="400" height="400" class="absolute inset-0 -z-10 h-full w-full object-cover" src="https://images.unsplash.com/photo-1522556189639-b150ed9c4330?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
            <div class="mt-auto rounded-xl bg-white/30 p-5 pb-6 ring-1 ring-inset ring-white/30 backdrop-blur-md">
              <h3 class="text-2xl font-semibold leading-9 tracking-tight text-white">Lucas Green</h3>
              <p class="text-lg leading-8 text-white">Customer Success</p>
              <ul role="list" class="mt-6 flex justify-start gap-x-5">
                <li>
                  <a class="text-white hover:text-gray-300" 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-white hover:text-gray-300" 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="relative isolate flex aspect-[3/4] flex-col overflow-hidden rounded-[2rem] bg-gray-50 p-5">
            <img width="400" height="400" class="absolute inset-0 -z-10 h-full w-full object-cover" src="https://images.unsplash.com/photo-1524504388940-b1c1722653e1?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
            <div class="mt-auto rounded-xl bg-white/30 p-5 pb-6 ring-1 ring-inset ring-white/30 backdrop-blur-md">
              <h3 class="text-2xl font-semibold leading-9 tracking-tight text-white">Mia Thompson</h3>
              <p class="text-lg leading-8 text-white">Design Lead</p>
              <ul role="list" class="mt-6 flex justify-start gap-x-5">
                <li>
                  <a class="text-white hover:text-gray-300" 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-white hover:text-gray-300" 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="relative isolate flex aspect-[3/4] flex-col overflow-hidden rounded-[2rem] bg-gray-50 p-5">
            <img width="400" height="400" class="absolute inset-0 -z-10 h-full w-full object-cover" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
            <div class="mt-auto rounded-xl bg-white/30 p-5 pb-6 ring-1 ring-inset ring-white/30 backdrop-blur-md">
              <h3 class="text-2xl font-semibold leading-9 tracking-tight text-white">Anthony Collins</h3>
              <p class="text-lg leading-8 text-white">Senior Developer</p>
              <ul role="list" class="mt-6 flex justify-start gap-x-5">
                <li>
                  <a class="text-white hover:text-gray-300" 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-white hover:text-gray-300" 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>

Frequently asked questions

: Photo grids, profile cards with social icons, leadership spotlight sections, and a compact name-and-role list style.
: Yes. Most card layouts have placeholder social icon links, just swap the href values with actual profile URLs.
: Replace the img src attributes with your photo URLs. The components use object-cover and a fixed aspect ratio so photos crop consistently without you having to worry about dimensions.
: That's fine. Tailwind grid layouts handle uneven numbers gracefully, the last row just won't be full. Looks totally normal.

Related Tailwind CSS components

More free, copy-paste Tailwind CSS components to use in your projects.

Testimonials 9 components Stats 11 components Contact Sections 9 components Blog Sections 11 components