Tailwind Team Components (208)

Team from NEUB

Team Member Card Grid with Bold Pink Header

A team section on a solid pink background with a yellow eyebrow label, large bold heading, and intro text above a two-by-two grid of white bordered cards. Each card pairs a headshot with a yellow offset block, a name, a pink role label, and a short bio.

<section class="py-20 bg-pink-500">
  <div class="container px-4 mx-auto">
    <div class="max-w-xl lg:max-w-2xl mx-auto text-center mb-12 lg:mb-16">
      <span class="inline-block px-4 py-2 bg-yellow-300 text-black font-bold text-sm tracking-wider uppercase">MEET THE TEAM</span>
      <h2 class="mt-8 mb-8 text-5xl sm:text-6xl lg:text-7xl leading-tight font-black font-heading tracking-tighter text-white">BUILD WITH THE <span class="text-yellow-300">BEST</span> MINDS</h2>
      <p class="text-lg sm:text-xl lg:text-2xl leading-tight text-white font-medium max-w-xl md:max-w-2xl mx-auto">Raw talent meets uncompromising vision. Meet the team that builds interfaces that
        demand attention.</p>
    </div>
    <div class="max-w-md lg:max-w-3xl mx-auto xl:max-w-none">
      <div class="flex flex-wrap -m-4">
        <div class="w-full xl:w-1/2 p-4">
          <div class="bg-white p-8 border-4 border-black shadow-[8px_8px_0px_0px_#000000]">
            <div class="flex flex-wrap lg:flex-nowrap items-center -mx-4">
              <div class="w-full md:w-auto px-4 pl-10 lg:pl-4 mb-12 lg:mb-0">
                <div class="relative w-52 h-52">
                  <div class="absolute inset-0 translate-x-2 translate-y-2 bg-yellow-300 w-52 h-52 border-2 border-black">
                  </div>
                  <img class="absolute inset-0 -translate-x-2 -translate-y-2 w-52 h-52 object-cover border-2 border-black bg-black" src="https://images.unsplash.com/photo-1627161684458-a62da52b51c3?q=80&amp;w=849&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.1.0&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
                </div>
              </div>
              <div class="w-full md:w-auto px-4">
                <div class="pl-6">
                  <h3 class="text-2xl font-black font-heading text-black mb-2 tracking-tight">Danny
                    Bailey</h3>
                  <p class="mb-4 text-lg text-pink-500 font-bold tracking-wide uppercase">
                    CEO &amp; Founder</p>
                  <p class="text-lg text-gray-600 leading-relaxed font-medium">Raw vision
                    meets execution. Building the future of bold interfaces.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="w-full xl:w-1/2 p-4">
          <div class="bg-white p-8 border-4 border-black shadow-[8px_8px_0px_0px_#000000]">
            <div class="flex flex-wrap lg:flex-nowrap items-center -mx-4">
              <div class="w-full md:w-auto px-4 pl-10 lg:pl-4 mb-12 lg:mb-0">
                <div class="relative w-52 h-52">
                  <div class="absolute inset-0 translate-x-2 translate-y-2 bg-yellow-300 w-52 h-52 border-2 border-black">
                  </div>
                  <img class="absolute inset-0 -translate-x-2 -translate-y-2 w-52 h-52 object-cover border-2 border-black bg-black" src="https://images.unsplash.com/photo-1627161683077-e34782c24d81?q=80&amp;w=703&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.1.0&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
                </div>
              </div>
              <div class="w-full md:w-auto px-4">
                <div class="pl-6">
                  <h3 class="text-2xl font-black font-heading text-black mb-2 tracking-tight">Danny
                    Bailey</h3>
                  <p class="mb-4 text-lg text-pink-500 font-bold tracking-wide uppercase">
                    CEO &amp; Founder</p>
                  <p class="text-lg text-gray-600 leading-relaxed font-medium">Raw vision
                    meets execution. Building the future of bold interfaces.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="w-full xl:w-1/2 p-4">
          <div class="bg-white p-8 border-4 border-black shadow-[8px_8px_0px_0px_#000000]">
            <div class="flex flex-wrap lg:flex-nowrap items-center -mx-4">
              <div class="w-full md:w-auto px-4 pl-10 lg:pl-4 mb-12 lg:mb-0">
                <div class="relative w-52 h-52">
                  <div class="absolute inset-0 translate-x-2 translate-y-2 bg-yellow-300 w-52 h-52 border-2 border-black">
                  </div>
                  <img class="absolute inset-0 -translate-x-2 -translate-y-2 w-52 h-52 object-cover border-2 border-black bg-black" src="https://images.unsplash.com/photo-1551831600-00661f324319?q=80&amp;w=687&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.1.0&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
                </div>
              </div>
              <div class="w-full md:w-auto px-4">
                <div class="pl-6">
                  <h3 class="text-2xl font-black font-heading text-black mb-2 tracking-tight">Danny
                    Bailey</h3>
                  <p class="mb-4 text-lg text-pink-500 font-bold tracking-wide uppercase">
                    CEO &amp; Founder</p>
                  <p class="text-lg text-gray-600 leading-relaxed font-medium">Raw vision
                    meets execution. Building the future of bold interfaces.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="w-full xl:w-1/2 p-4">
          <div class="bg-white p-8 border-4 border-black shadow-[8px_8px_0px_0px_#000000]">
            <div class="flex flex-wrap lg:flex-nowrap items-center -mx-4">
              <div class="w-full md:w-auto px-4 pl-10 lg:pl-4 mb-12 lg:mb-0">
                <div class="relative w-52 h-52">
                  <div class="absolute inset-0 translate-x-2 translate-y-2 bg-yellow-300 w-52 h-52 border-2 border-black">
                  </div>
                  <img class="absolute inset-0 -translate-x-2 -translate-y-2 w-52 h-52 object-cover border-2 border-black bg-black" src="https://images.unsplash.com/photo-1666866868698-67ee989fba70?q=80&amp;w=747&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.1.0&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
                </div>
              </div>
              <div class="w-full md:w-auto px-4">
                <div class="pl-6">
                  <h3 class="text-2xl font-black font-heading text-black mb-2 tracking-tight">Danny
                    Bailey</h3>
                  <p class="mb-4 text-lg text-pink-500 font-bold tracking-wide uppercase">
                    CEO &amp; Founder</p>
                  <p class="text-lg text-gray-600 leading-relaxed font-medium">Raw vision
                    meets execution. Building the future of bold interfaces.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</section>

Team from Casper

Tailwind CSS

Casper

Dark Hero Section with Team Member Card Grid

A dark-themed split-screen section with a large heading "Meet our amazing Team", supporting text, and an outlined call-to-action button on the left, and a staggered grid of four outlined team member cards with avatars, names, and roles on the right. A decorative purple planet and sparkle graphic accent the left side.

<section x-data="{ showContent: false }" class="relative pb-12 md:py-24 lg:py-32 bg-body overflow-hidden">
  <div class="relative container mx-auto px-4">
    <div class="flex flex-wrap -mx-4">
      <div class="relative w-full lg:w-1/2 px-4 mb-8 lg:mb-0">
        <div class="absolute top-0 left-0 -ml-64 w-160 h-160 bg-gradient-to-t from-purple-700 to-darkBlue-900 rounded-full filter blur-4xl"></div>
        <img class="absolute top-0 right-0 md:-mt-20 mr-4 md:mr-32 w-52 md:w-auto" src="casper-assets/team/planet.png" alt="">
        <img class="absolute bottom-0 right-0 mr-40 animate-spinStar" src="casper-assets/team/blink-star.png" alt="">
        <div class="relative pt-52 pb-40 max-w-lg mx-auto lg:mx-0">
          <h2 class="max-w-md font-heading text-4xl xs:text-5xl sm:text-6xl font-medium text-white tracking-tight mb-8">Meet our amazing Team</h2>
          <p class="text-xl text-gray-500 tracking-tight mb-8">Mi turpis turpis in justo pellentesque id nibh praesent.</p>
          <a x-show="!showContent" x-on:click.prevent="showContent = true" class="group inline-flex w-full md:w-auto h-14 px-7 items-center justify-center text-base font-medium text-white hover:text-violet-500 bg-transparent hover:bg-white border-2 border-white transition duration-200 rounded-full" href="#">
            <span class="mr-2">SHOW ALL PEOPLE</span>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M17.9199 6.62C17.8185 6.37565 17.6243 6.18147 17.3799 6.08C17.2597 6.02876 17.1306 6.00158 16.9999 6H6.99994C6.73472 6 6.48037 6.10536 6.29283 6.29289C6.1053 6.48043 5.99994 6.73478 5.99994 7C5.99994 7.26522 6.1053 7.51957 6.29283 7.70711C6.48037 7.89464 6.73472 8 6.99994 8H14.5899L6.28994 16.29C6.19621 16.383 6.12182 16.4936 6.07105 16.6154C6.02028 16.7373 5.99414 16.868 5.99414 17C5.99414 17.132 6.02028 17.2627 6.07105 17.3846C6.12182 17.5064 6.19621 17.617 6.28994 17.71C6.3829 17.8037 6.4935 17.8781 6.61536 17.9289C6.73722 17.9797 6.86793 18.0058 6.99994 18.0058C7.13195 18.0058 7.26266 17.9797 7.38452 17.9289C7.50638 17.8781 7.61698 17.8037 7.70994 17.71L15.9999 9.41V17C15.9999 17.2652 16.1053 17.5196 16.2928 17.7071C16.4804 17.8946 16.7347 18 16.9999 18C17.2652 18 17.5195 17.8946 17.707 17.7071C17.8946 17.5196 17.9999 17.2652 17.9999 17V7C17.9984 6.86932 17.9712 6.74022 17.9199 6.62Z" fill="currentColor"></path>
            </svg>
          </a>
        </div>
      </div>
      <div class="relative w-full lg:w-1/2 px-4">
        <div class="max-w-lg md:max-w-none lg:max-w-xl 2xl:max-w-2xl mx-auto lg:mr-0">
          <div class="flex flex-wrap -mx-4">
            <div class="w-full md:w-1/2 px-4 mb-8 md:mb-0">
              <div class="py-10 px-11 mb-10 border-2 border-white rounded-3xl">
                <div class="text-center">
                  <img class="block mx-auto mb-6" src="casper-assets/team/avatar-2-sm.png" alt="">
                  <span class="block text-2xl text-white font-medium">Marvin McKinney</span>
                  <span class="block text-base text-violet-500 font-medium">Tech Lead</span>
                </div>
              </div>
              <div class="py-10 px-11 mb-10 border-2 border-white rounded-3xl">
                <div class="text-center">
                  <img class="block mx-auto mb-6" src="casper-assets/team/avatar-1-sm.png" alt="">
                  <span class="block text-2xl text-white font-medium">Oliver Evans</span>
                  <span class="block text-base text-violet-500 font-medium">CTO</span>
                </div>
              </div>
              <div x-show="showContent" class="visibility-item">
                <div class="py-10 px-11 border-2 border-white rounded-3xl">
                  <div class="text-center">
                    <img class="block mx-auto mb-6" src="casper-assets/team/avatar-2-sm.png" alt="">
                    <span class="block text-2xl text-white font-medium">Liam Brown</span>
                    <span class="block text-base text-violet-500 font-medium">CEO</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="w-full md:w-1/2 px-4 md:pt-18">
              <div class="py-10 px-11 mb-10 border-2 border-white rounded-3xl">
                <div class="text-center">
                  <img class="block mx-auto mb-6" src="casper-assets/team/avatar-1-sm.png" alt="">
                  <span class="block text-2xl text-white font-medium">Samuel Griffin</span>
                  <span class="block text-base text-violet-500 font-medium">Tech Lead</span>
                </div>
              </div>
              <div class="py-10 px-11 mb-10 border-2 border-white rounded-3xl">
                <div class="text-center">
                  <img class="block mx-auto mb-6" src="casper-assets/team/avatar-2-sm.png" alt="">
                  <span class="block text-2xl text-white font-medium">Kathryn Murphy</span>
                  <span class="block text-base text-violet-500 font-medium">CTO</span>
                </div>
              </div>
              <div x-show="showContent" class="visibility-item">
                <div class="py-10 px-11 border-2 border-white rounded-3xl">
                  <div class="text-center">
                    <img class="block mx-auto mb-6" src="casper-assets/team/avatar-1-sm.png" alt="">
                    <span class="block text-2xl text-white font-medium">Lucas Wilson</span>
                    <span class="block text-base text-violet-500 font-medium">PM</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Team from Mirga

Tailwind CSS

Mirga

Team Section with Member Card Carousel

A team showcase section with a large 'Team' heading, a descriptive headline, and a horizontal row of three member cards showing portraits, names, roles, and More buttons. A circular-arrow control on the right edge and a centered More button suggest additional members beyond the visible cards.

<section x-data="{ activeSlide: 1, slideCount: 3 }" class="bg-neutral-50 py-12 md:py-24">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4 mb-14">
      <div class="w-full lg:w-1/2 p-4">
        <h1 class="text-6xl sm:text-9xl xl:text-11xl font-semibold mb-16 font-heading">Team</h1>
        <p class="text-neutral-600 text-2xl font-semibold tracking-tight max-w-md">At the heart of our success is a diverse and talented team.</p>
      </div>
      <div class="w-full lg:w-1/2 p-4">
        <h2 class="text-3xl sm:text-4xl xl:text-6xl font-semibold relative mb-12 max-w-md sm:max-w-lg lg:max-w-2xl tracking-tight font-heading">
          <span class="mr-1.5">Our dedicated team of experts collaborates passionately to drive innovation and achieve</span>
          <span class="relative inline-block">
            <span class="relative z-10">outstanding results.</span>
            <span class="absolute -bottom-4 left-0 h-2.5 w-full bg-green-100 rounded-full"></span>
          </span>
        </h2>
        <p class="text-neutral-600 text-2xl font-semibold max-w-2xl tracking-tight">At the heart of our success is a diverse and talented team, united by a shared commitment to excellence.</p>
      </div>
    </div>
    <div class="relative">
      <div class="absolute z-10 right-6 md:left-0 top-14 h-112 w-full md:flex md:flex-col md:justify-center md:ml-6">
        <div class="relative">
          <a x-show="activeSlide > 1" x-on:click.prevent="activeSlide = activeSlide > 1 ? activeSlide - 1 : slideCount" class="visibility-item absolute top-1/2 right-14 transform -translate-y-1/2 flex items-center justify-center w-12 h-16 bg-neutral-900 hover:bg-opacity-80 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M9 18L10.2915 16.7463L3.4452 9.9L18 9.9L18 8.1L3.4452 8.1L10.2726 1.2726L9 3.02789e-06L7.86805e-07 9L9 18Z" fill="white"></path>
            </svg>
          </a>
          <a x-on:click.prevent="activeSlide = activeSlide < slideCount ? activeSlide + 1 : 1" class="absolute top-1/2 right-0 transform -translate-y-1/2 flex items-center justify-center w-12 h-16 bg-neutral-900 hover:bg-opacity-80 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M9 0L7.7085 1.2537L14.5548 8.1L0 8.1L0 9.9L14.5548 9.9L7.7274 16.7274L9 18L18 9L9 0Z" fill="white"></path>
            </svg>
          </a>
        </div>
      </div>
      <div class="mb-20 relative overflow-hidden">
        <div :style="'transform: translateX(-' + (activeSlide - 1) * 100.5 + '%)'" class="whitespace-nowrap transition-transform duration-500 ease-in-out">
          <div class="inline-block w-full h-full whitespace-normal">
            <div class="flex flex-wrap -m-5">
              <div class="w-full md:w-1/3 p-5">
                <img class="rounded-4xl h-112 w-full object-cover" src="mirga-assets/images/faq/picture4.png" alt="">
                <div class="bg-white rounded-5xl p-10">
                  <h6 class="text-3xl font-semibold mb-4 tracking-tight font-heading">Laureen Smith</h6>
                  <p class="text-neutral-600 text-xl font-medium mb-8 tracking-tight">Co-Founder</p>
                  <a class="inline-flex justify-center items-center text-center h-16 p-5 font-semibold tracking-tight text-xl hover:text-white focus:text-white bg-white hover:bg-neutral-900 focus:bg-neutral-900 border border-neutral-900 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">More</a>
                </div>
              </div>
              <div class="w-full md:w-1/3 p-5">
                <img class="rounded-4xl h-112 w-full object-cover" src="mirga-assets/images/team/card-image2.png" alt="">
                <div class="bg-white rounded-5xl p-10">
                  <h6 class="text-3xl font-semibold mb-4 tracking-tight font-heading">Hanna I. Keaton</h6>
                  <p class="text-neutral-600 text-xl font-medium mb-8 tracking-tight">Co-Founder</p>
                  <a class="inline-flex justify-center items-center text-center h-16 p-5 font-semibold tracking-tight text-xl hover:text-white focus:text-white bg-white hover:bg-neutral-900 focus:bg-neutral-900 border border-neutral-900 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">More</a>
                </div>
              </div>
              <div class="w-full md:w-1/3 p-5">
                <img class="rounded-4xl h-112 w-full object-cover" src="mirga-assets/images/team/card-image3.png" alt="">
                <div class="bg-white rounded-5xl p-10">
                  <h6 class="text-3xl font-semibold mb-4 tracking-tight font-heading">Henrick Beeman</h6>
                  <p class="text-neutral-600 text-xl font-medium mb-8 tracking-tight">Art Director</p>
                  <a class="inline-flex justify-center items-center text-center h-16 p-5 font-semibold tracking-tight text-xl hover:text-white focus:text-white bg-white hover:bg-neutral-900 focus:bg-neutral-900 border border-neutral-900 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">More</a>
                </div>
              </div>
            </div>
          </div>
          <div class="visibility-item inline-block w-full h-full whitespace-normal">
            <div class="flex flex-wrap -m-5">
              <div class="w-full md:w-1/3 p-5">
                <img class="rounded-4xl h-112 w-full object-cover" src="mirga-assets/images/faq/picture4.png" alt="">
                <div class="bg-white rounded-5xl p-10">
                  <h6 class="text-3xl font-semibold mb-4 tracking-tight font-heading">Oliver Hawthorne</h6>
                  <p class="text-neutral-600 text-xl font-medium mb-8 tracking-tight">Co-Founder</p>
                  <a class="inline-flex justify-center items-center text-center h-16 p-5 font-semibold tracking-tight text-xl hover:text-white focus:text-white bg-white hover:bg-neutral-900 focus:bg-neutral-900 border border-neutral-900 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">More</a>
                </div>
              </div>
              <div class="w-full md:w-1/3 p-5">
                <img class="rounded-4xl h-112 w-full object-cover" src="mirga-assets/images/team/card-image2.png" alt="">
                <div class="bg-white rounded-5xl p-10">
                  <h6 class="text-3xl font-semibold mb-4 tracking-tight font-heading">Cola Puncanno</h6>
                  <p class="text-neutral-600 text-xl font-medium mb-8 tracking-tight">Co-Founder</p>
                  <a class="inline-flex justify-center items-center text-center h-16 p-5 font-semibold tracking-tight text-xl hover:text-white focus:text-white bg-white hover:bg-neutral-900 focus:bg-neutral-900 border border-neutral-900 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">More</a>
                </div>
              </div>
              <div class="w-full md:w-1/3 p-5">
                <img class="rounded-4xl h-112 w-full object-cover" src="mirga-assets/images/team/card-image3.png" alt="">
                <div class="bg-white rounded-5xl p-10">
                  <h6 class="text-3xl font-semibold mb-4 tracking-tight font-heading">Mason Archer</h6>
                  <p class="text-neutral-600 text-xl font-medium mb-8 tracking-tight">Art Director</p>
                  <a class="inline-flex justify-center items-center text-center h-16 p-5 font-semibold tracking-tight text-xl hover:text-white focus:text-white bg-white hover:bg-neutral-900 focus:bg-neutral-900 border border-neutral-900 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">More</a>
                </div>
              </div>
            </div>
          </div>
          <div class="visibility-item inline-block w-full h-full whitespace-normal">
            <div class="flex flex-wrap -m-5">
              <div class="w-full md:w-1/3 p-5">
                <img class="rounded-4xl h-112 w-full object-cover" src="mirga-assets/images/faq/picture4.png" alt="">
                <div class="bg-white rounded-5xl p-10">
                  <h6 class="text-3xl font-semibold mb-4 tracking-tight font-heading">Maya Winslow</h6>
                  <p class="text-neutral-600 text-xl font-medium mb-8 tracking-tight">Co-Founder</p>
                  <a class="inline-flex justify-center items-center text-center h-16 p-5 font-semibold tracking-tight text-xl hover:text-white focus:text-white bg-white hover:bg-neutral-900 focus:bg-neutral-900 border border-neutral-900 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">More</a>
                </div>
              </div>
              <div class="w-full md:w-1/3 p-5">
                <img class="rounded-4xl h-112 w-full object-cover" src="mirga-assets/images/team/card-image2.png" alt="">
                <div class="bg-white rounded-5xl p-10">
                  <h6 class="text-3xl font-semibold mb-4 tracking-tight font-heading">Isabella Sterling</h6>
                  <p class="text-neutral-600 text-xl font-medium mb-8 tracking-tight">Co-Founder</p>
                  <a class="inline-flex justify-center items-center text-center h-16 p-5 font-semibold tracking-tight text-xl hover:text-white focus:text-white bg-white hover:bg-neutral-900 focus:bg-neutral-900 border border-neutral-900 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">More</a>
                </div>
              </div>
              <div class="w-full md:w-1/3 p-5">
                <img class="rounded-4xl h-112 w-full object-cover" src="mirga-assets/images/team/card-image3.png" alt="">
                <div class="bg-white rounded-5xl p-10">
                  <h6 class="text-3xl font-semibold mb-4 tracking-tight font-heading">Mark Johanson Jr</h6>
                  <p class="text-neutral-600 text-xl font-medium mb-8 tracking-tight">Art Director</p>
                  <a class="inline-flex justify-center items-center text-center h-16 p-5 font-semibold tracking-tight text-xl hover:text-white focus:text-white bg-white hover:bg-neutral-900 focus:bg-neutral-900 border border-neutral-900 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">More</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex justify-center">
      <div class="w-auto"><a class="inline-flex justify-center items-center text-center h-20 p-5 font-semibold tracking-tight text-2xl text-white bg-neutral-900 hover:bg-neutral-800 focus:bg-neutral-800 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">More</a></div>
    </div>
  </div>
</section>

Your next website starts here

Design with AI and generate multiple website concepts in minutes. Make it yours with Shuffle: tweak every detail in a visual editor.

Start with Multi-AI Designer

A landing page for a specialty coffee roastery|

Claude

GPT

Gemini

Describe your idea and compare designs from multiple AI models side by side. Try AI Design

Start with Visual Editor

Components Navigations Headers Features Pricing Footers

Header

Build from 13,400+ UI components and templates, then customize every detail. Try Visual Editor

EXPORT CODE TO THE TECH YOU LOVE

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Team from Flow

Tailwind CSS

Flow

Meet our experts team carousel with photo cards

A light-background section with a large heading, subtitle, and previous/next arrow controls above a horizontally scrolling row of rounded team member photo cards. Each card shows a portrait with a white name and role label overlay at the bottom.

<section x-data="{ activeSlide: 1, slideCount: 2 }" class="py-12 lg:py-24 overflow-hidden">
        <div class="container mx-auto px-4">
            <div class="flex flex-wrap items-center mb-12 md:mb-20 -mx-4">
                <div class="w-full md:w-1/2 px-4 mb-12 md:mb-0">
                    <div>
                        <h1 class="font-heading text-5xl sm:text-6xl mb-4">Meet our experts</h1>
                        <p class="text-gray-700">Our team boasts top green energy experts, driving innovation in sustainability.</p>
                    </div>
                </div>
                <div class="w-full md:w-1/2 px-4">
                    <div class="flex items-center justify-end">
                        <button x-on:click.prevent="activeSlide = 1" class="inline-block text-gray-800 mr-1">
                            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <g opacity="0.4">
                                <path d="M17.5 29.1667L8.33333 20.0001L17.5 10.8334" stroke="currentColor" stroke-width="1.5"></path>
                                <path d="M8.33329 20L31.6666 20" stroke="currentColor" stroke-width="1.5"></path>
                                </g>
                            </svg>                                
                        </button>
                        <button x-on:click.prevent="activeSlide = 2" class="inline-block text-black hover:text-lime-500">
                            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M22.5 10.8333L31.6667 19.9999L22.5 29.1666" stroke="currentColor" stroke-width="1.5"></path>
                                <path d="M31.6666 20H8.33331" stroke="currentColor" stroke-width="1.5"></path>
                            </svg>                                
                        </button>
                    </div>
                </div>
            </div>
            <div :style="'transform: translateX(-' + (activeSlide - 1) * 100.5 + '%)'" class="flex transition-transform duration-1000 ease-in-out">
                <div class="relative flex-shrink-0 w-full sm:w-87 h-full sm:h-112 mr-8 overflow-hidden">
                    <div class="absolute bottom-0 left-0 w-full p-4">
                        <div class="p-4 bg-white rounded-xl">
                            <span class="block font-medium">Jenny Wilson</span>
                            <span class="text-sm text-gray-700">Senior Sustainability Consultant</span>
                        </div>
                    </div>
                    <img class="block w-full h-full object-cover rounded-2xl" src="flow-assets/team/photo-worker-1.png" alt="">
                </div>
                <div class="relative flex-shrink-0 w-full sm:w-87 h-full sm:h-112 mr-8 overflow-hidden">
                    <div class="absolute bottom-0 left-0 w-full p-4">
                        <div class="p-4 bg-white rounded-xl">
                            <span class="block font-medium">Cameron Williamson</span>
                            <span class="text-sm text-gray-700">Senior Sustainability Consultant</span>
                        </div>
                    </div>
                    <img class="block w-full h-full object-cover rounded-2xl" src="flow-assets/team/photo-worker-2.png" alt="">
                </div>
                <div class="relative flex-shrink-0 w-full sm:w-87 h-full sm:h-112 mr-8 overflow-hidden">
                    <div class="absolute bottom-0 left-0 w-full p-4">
                        <div class="p-4 bg-white rounded-xl">
                            <span class="block font-medium">Courtney Henry</span>
                            <span class="text-sm text-gray-700">Energy Analysts</span>
                        </div>
                    </div>
                    <img class="block w-full h-full object-cover rounded-2xl" src="flow-assets/team/photo-worker-3.png" alt="">
                </div>
                <div class="relative flex-shrink-0 w-full sm:w-87 h-full sm:h-112 mr-8 overflow-hidden">
                    <div class="absolute bottom-0 left-0 w-full p-4">
                        <div class="p-4 bg-white rounded-xl">
                            <span class="block font-medium">Dianne Russell</span>
                            <span class="text-sm text-gray-700">Senior Renewable Energy Engineer</span>
                        </div>
                    </div>
                    <img class="block w-full h-full object-cover rounded-2xl" src="flow-assets/team/photo-worker-4.png" alt="">
                </div>
                <div class="relative flex-shrink-0 w-full sm:w-87 h-full sm:h-112 mr-8 overflow-hidden">
                    <div class="absolute bottom-0 left-0 w-full p-4">
                        <div class="p-4 bg-white rounded-xl">
                            <span class="block font-medium">Jenny Wilson</span>
                            <span class="text-sm text-gray-700">Senior Sustainability Consultant</span>
                        </div>
                    </div>
                    <img class="block w-full h-full object-cover rounded-2xl" src="flow-assets/team/photo-worker-1.png" alt="">
                </div>
                <div class="relative flex-shrink-0 w-full sm:w-87 h-full sm:h-112 mr-8 overflow-hidden">
                    <div class="absolute bottom-0 left-0 w-full p-4">
                        <div class="p-4 bg-white rounded-xl">
                            <span class="block font-medium">Cameron Williamson</span>
                            <span class="text-sm text-gray-700">Senior Sustainability Consultant</span>
                        </div>
                    </div>
                    <img class="block w-full h-full object-cover rounded-2xl" src="flow-assets/team/photo-worker-2.png" alt="">
                </div>
                <div class="relative flex-shrink-0 w-full sm:w-87 h-full sm:h-112 mr-8 overflow-hidden">
                    <div class="absolute bottom-0 left-0 w-full p-4">
                        <div class="p-4 bg-white rounded-xl">
                            <span class="block font-medium">Courtney Henry</span>
                            <span class="text-sm text-gray-700">Energy Analysts</span>
                        </div>
                    </div>
                    <img class="block w-full h-full object-cover rounded-2xl" src="flow-assets/team/photo-worker-3.png" alt="">
                </div>
            </div>
        </div>
    </section>

Team from Vista

Tailwind CSS

Vista

Team member card grid with headshots and social links

A dark-themed team section titled 'Meet our team' with a 'We are hiring!' badge and Careers button above three cards. Each card shows a pink-backed headshot with a name, role, and X and LinkedIn icons in a dark overlay panel.

<section class="bg-darkPink-900 pt-32 pb-56">
    <div class="container mx-auto px-4">
        <p class="uppercase text-sweetPink-400 tracking-widest text-xs mb-4">diverse and world-class</p>
        <div class="flex justify-between items-center flex-wrap gap-4 mb-20">
            <h1 class="font-heading text-white text-4xl md:text-5xl font-bold">Meet our team</h1>
            <div class="flex flex-wrap items-center gap-8">
                <div class="flex items-center gap-2">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M9.27232 5.86195L9.50687 6.42602L10.1158 6.47481L13.4188 6.73946L10.9024 8.89524L10.4387 9.29254L10.5803 9.88656L11.3486 13.1096L8.52091 11.3826L7.99968 11.0642L7.47844 11.3826L4.65075 13.1096L5.41909 9.88656L5.56069 9.29254L5.09694 8.89524L2.58054 6.73946L5.88355 6.47481L6.49248 6.42602L6.72703 5.86195L7.99968 2.80137L9.27232 5.86195ZM4.581 13.4022L4.58109 13.4019L4.581 13.4022ZM2.28065 6.76349L2.28088 6.76347L2.28065 6.76349Z" fill="#F53D6C" stroke="#F53D6C" style="fill:#F53D6C;fill:color(display-p3 0.9608 0.2392 0.4235);fill-opacity:1;stroke:#F53D6C;stroke:color(display-p3 0.9608 0.2392 0.4235);stroke-opacity:1;" stroke-width="2"></path>
                    </svg>
                    <p class="text-pink-500 font-semibold">We are hiring!</p>
                </div>
                <a href="#" class="group relative inline-block p-0.5 font-semibold overflow-hidden rounded-full">
                    <div class="absolute inset-0 bg-gradient-to-b from-white to-gray-500 group-focus:to-white opacity-40 group-focus:opacity-20 rounded-full"></div>
                    <div class="relative z-50 flex items-center py-2 px-4 bg-white group-hover:bg-opacity-80 group-focus:bg-opacity-80 rounded-full transition duration-200">
                        <p class="mr-2 text-pinkSecondary-900">Careers</p>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                            <path d="M9.43032 8.28857L9.4303 8.28856L9.42602 8.29284L6.45312 11.2657V8.20662V4.7275L8.11268 6.38706L9.42602 7.70039C9.59121 7.86558 9.58501 8.13574 9.43032 8.28857Z" fill="black" stroke="currentColor" stroke-width="2"></path>
                        </svg>
                    </div>
                </a>
            </div>
        </div>  
        <div class="flex flex-wrap -m-4">
            <div class="w-full lg:w-1/3 p-4">
                <div class="relative bg-pink-500 rounded-2xl pt-7 mb-12 lg:mb-0">
                    <img class="mx-auto h-72 object-cover" src="vista-assets/images/team/team1.png" alt="">
                    <div class="absolute -bottom-12 left-4 right-4">
                        <div class="bg-pinkSecondary-900 rounded-xl p-4">
                            <p class="text-white text-lg font-semibold mb-1">David Dobryk</p>
                            <div class="flex flex-wrap justify-between items-center gap-4">
                                <p class="text-white text-opacity-70 text-sm">Founder &amp; CEO</p>
                                <div class="flex gap-4">
                                    <a href="#" class="inline-block opacity-50 hover:opacity-100 transition duration-200">
                                        <img class="h-4" src="vista-assets/images/logos/twitter-x-logo.svg" alt="">
                                    </a>
                                    <a href="#" class="inline-block opacity-50 hover:opacity-100 transition duration-200">
                                        <img class="h-4" src="vista-assets/images/logos/linkedin-logo.svg" alt="">
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full lg:w-1/3 p-4">
                <div class="relative bg-pink-500 rounded-2xl pt-7 mb-12 lg:mb-0">
                    <img class="mx-auto h-72 object-cover" src="vista-assets/images/team/team2.png" alt="">
                    <div class="absolute -bottom-12 left-4 right-4">
                        <div class="bg-pinkSecondary-900 rounded-xl p-4">
                            <p class="text-white text-lg font-semibold mb-1">Milena Graz</p>
                            <div class="flex flex-wrap justify-between items-center gap-4">
                                <p class="text-white text-opacity-70 text-sm">Founder &amp; CEO</p>
                                <div class="flex gap-4">
                                    <a href="#" class="inline-block opacity-50 hover:opacity-100 transition duration-200">
                                        <img class="h-4" src="vista-assets/images/logos/twitter-x-logo.svg" alt="">
                                    </a>
                                    <a href="#" class="inline-block opacity-50 hover:opacity-100 transition duration-200">
                                        <img class="h-4" src="vista-assets/images/logos/linkedin-logo.svg" alt="">
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full lg:w-1/3 p-4">
                <div class="relative bg-pink-500 rounded-2xl pt-7">
                    <img class="mx-auto h-72 object-cover" src="vista-assets/images/team/team3.png" alt="">
                    <div class="absolute -bottom-12 left-4 right-4">
                        <div class="bg-pinkSecondary-900 rounded-xl p-4">
                            <p class="text-white text-lg font-semibold mb-1">Mike Nelson</p>
                            <div class="flex flex-wrap justify-between items-center gap-4">
                                <p class="text-white text-opacity-70 text-sm">Head of Technology</p>
                                <div class="flex gap-4">
                                    <a href="#" class="inline-block opacity-50 hover:opacity-100 transition duration-200">
                                        <img class="h-4" src="vista-assets/images/logos/twitter-x-logo.svg" alt="">
                                    </a>
                                    <a href="#" class="inline-block opacity-50 hover:opacity-100 transition duration-200">
                                        <img class="h-4" src="vista-assets/images/logos/linkedin-logo.svg" alt="">
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Team from Cyber

Tailwind CSS

Cyber

Digital Operatives Matrix Team Card Grid

A dark-themed section with a gradient heading and a 3x2 grid of team member cards, each showing a circular avatar with status dot, a cyan, purple, or green name, and a monospace role label. The cards have angled corners and thin accent borders.

<section class="relative py-20 bg-gradient-to-br from-black via-gray-950 to-black">
  <div class="absolute inset-0 opacity-20">
    <div class="absolute top-20 left-1/4 w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
    <div class="absolute top-40 right-1/3 w-1 h-1 bg-green-400 rounded-full animate-pulse delay-75"></div>
    <div class="absolute bottom-40 left-1/3 w-3 h-3 bg-purple-500 rounded-full animate-pulse delay-150"></div>
    <div class="absolute bottom-20 right-1/4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-300"></div>
  </div>
  
  <div class="container px-4 mx-auto relative z-10">
    <div class="max-w-3xl mx-auto mb-12 lg:mb-16 text-center">
      <span class="text-xs font-semibold text-blue-400 uppercase tracking-wider animate-pulse">NEURAL NETWORK</span>
      <h2 class="mt-2 mb-4 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading tracking-wider bg-gradient-to-r from-blue-400 via-purple-500 to-green-400 bg-clip-text text-transparent">DIGITAL OPERATIVES MATRIX</h2>
      <p class="text-lg text-gray-400 leading-loose">Interface with our elite cybernetic team. Each operative specializes in quantum protocols and system infiltration algorithms.</p>
    </div>
    <div class="flex flex-wrap -m-4">
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="group relative flex items-center justify-center bg-gradient-to-br from-gray-800 to-gray-950 py-12 border border-blue-400 border-opacity-20 hover:border-opacity-60 transition-all duration-300 transform hover:scale-105 animate-float" style="clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));">
          <div class="absolute inset-0 bg-gradient-to-br from-blue-400 via-purple-500 to-green-400 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
          <div class="text-center relative z-10">
            <div class="relative w-20 h-20 mx-auto mb-6">
              <img class="w-20 h-20 mx-auto rounded-full border-2 border-blue-400 p-1" src="https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=8&amp;w=300&amp;h=300&amp;q=80" alt="">
              <div class="absolute -top-1 -right-1 w-4 h-4 bg-green-400 rounded-full animate-pulse"></div>
            </div>
            <h3 class="mb-1 text-2xl font-bold font-heading text-blue-400 tracking-wider">AGENT BAILEY</h3>
            <p class="text-lg text-gray-400 text-sm">SYSTEM ARCHITECT</p>
          </div>
          <div class="absolute top-4 right-4 w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="group relative flex items-center justify-center bg-gradient-to-br from-gray-800 to-gray-950 py-12 border border-purple-500 border-opacity-20 hover:border-opacity-60 transition-all duration-300 transform hover:scale-105 animate-float delay-75" style="clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));">
          <div class="absolute inset-0 bg-gradient-to-br from-purple-500 via-blue-400 to-green-400 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
          <div class="text-center relative z-10">
            <div class="relative w-20 h-20 mx-auto mb-6">
              <img class="w-20 h-20 mx-auto rounded-full border-2 border-purple-500 p-1" src="https://images.unsplash.com/photo-1618641986557-1ecd230959aa?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMzIzMzB8MHwxfHNlYXJjaHw1fHxwcm9maWxlfGVufDB8fHx8MTc0ODE4MjA2N3ww&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=300&amp;w=300" alt="">
              <div class="absolute -top-1 -right-1 w-4 h-4 bg-green-400 rounded-full animate-pulse"></div>
            </div>
            <h3 class="mb-1 text-2xl font-bold font-heading text-purple-500 tracking-wider">AGENT BAILEY</h3>
            <p class="text-lg text-gray-400 text-sm">PROTOCOL ENGINEER</p>
          </div>
          <div class="absolute top-4 right-4 w-2 h-2 bg-purple-500 rounded-full animate-pulse"></div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="group relative flex items-center justify-center bg-gradient-to-br from-gray-800 to-gray-950 py-12 border border-green-400 border-opacity-20 hover:border-opacity-60 transition-all duration-300 transform hover:scale-105 animate-float delay-150" style="clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));">
          <div class="absolute inset-0 bg-gradient-to-br from-green-400 via-blue-400 to-purple-500 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
          <div class="text-center relative z-10">
            <div class="relative w-20 h-20 mx-auto mb-6">
              <img class="w-20 h-20 mx-auto rounded-full border-2 border-green-400 p-1" src="https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=8&amp;w=300&amp;h=300&amp;q=80" alt="">
              <div class="absolute -top-1 -right-1 w-4 h-4 bg-green-400 rounded-full animate-pulse"></div>
            </div>
            <h3 class="mb-1 text-2xl font-bold font-heading text-green-400 tracking-wider">AGENT BAILEY</h3>
            <p class="text-lg text-gray-400 text-sm">DATA SPECIALIST</p>
          </div>
          <div class="absolute top-4 right-4 w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="group relative flex items-center justify-center bg-gradient-to-br from-gray-800 to-gray-950 py-12 border border-blue-400 border-opacity-20 hover:border-opacity-60 transition-all duration-300 transform hover:scale-105 animate-float delay-300" style="clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));">
          <div class="absolute inset-0 bg-gradient-to-br from-blue-400 via-green-400 to-purple-500 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
          <div class="text-center relative z-10">
            <div class="relative w-20 h-20 mx-auto mb-6">
              <img class="w-20 h-20 mx-auto rounded-full border-2 border-blue-400 p-1" src="https://images.unsplash.com/photo-1618641986557-1ecd230959aa?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMzIzMzB8MHwxfHNlYXJjaHw1fHxwcm9maWxlfGVufDB8fHx8MTc0ODE4MjA2N3ww&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=300&amp;w=300" alt="">
              <div class="absolute -top-1 -right-1 w-4 h-4 bg-green-400 rounded-full animate-pulse"></div>
            </div>
            <h3 class="mb-1 text-2xl font-bold font-heading text-blue-400 tracking-wider">AGENT BAILEY</h3>
            <p class="text-lg text-gray-400 text-sm">QUANTUM ANALYST</p>
          </div>
          <div class="absolute top-4 right-4 w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="group relative flex items-center justify-center bg-gradient-to-br from-gray-800 to-gray-950 py-12 border border-purple-500 border-opacity-20 hover:border-opacity-60 transition-all duration-300 transform hover:scale-105 animate-float" style="clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));">
          <div class="absolute inset-0 bg-gradient-to-br from-purple-500 via-green-400 to-blue-400 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
          <div class="text-center relative z-10">
            <div class="relative w-20 h-20 mx-auto mb-6">
              <img class="w-20 h-20 mx-auto rounded-full border-2 border-purple-500 p-1" src="https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=8&amp;w=300&amp;h=300&amp;q=80" alt="">
              <div class="absolute -top-1 -right-1 w-4 h-4 bg-green-400 rounded-full animate-pulse"></div>
            </div>
            <h3 class="mb-1 text-2xl font-bold font-heading text-purple-500 tracking-wider">AGENT BAILEY</h3>
            <p class="text-lg text-gray-400 text-sm">NEURAL OPERATIVE</p>
          </div>
          <div class="absolute top-4 right-4 w-2 h-2 bg-purple-500 rounded-full animate-pulse"></div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="group relative flex items-center justify-center bg-gradient-to-br from-gray-800 to-gray-950 py-12 border border-green-400 border-opacity-20 hover:border-opacity-60 transition-all duration-300 transform hover:scale-105 animate-float delay-75" style="clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));">
          <div class="absolute inset-0 bg-gradient-to-br from-green-400 via-purple-500 to-blue-400 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
          <div class="text-center relative z-10">
            <div class="relative w-20 h-20 mx-auto mb-6">
              <img class="w-20 h-20 mx-auto rounded-full border-2 border-green-400 p-1" src="https://images.unsplash.com/photo-1618641986557-1ecd230959aa?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMzIzMzB8MHwxfHNlYXJjaHw1fHxwcm9maWxlfGVufDB8fHx8MTc0ODE4MjA2N3ww&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=300&amp;w=300" alt="">
              <div class="absolute -top-1 -right-1 w-4 h-4 bg-green-400 rounded-full animate-pulse"></div>
            </div>
            <h3 class="mb-1 text-2xl font-bold font-heading text-green-400 tracking-wider">AGENT BAILEY</h3>
            <p class="text-lg text-gray-400 text-sm">CYBER COMMANDER</p>
          </div>
          <div class="absolute top-4 right-4 w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
        </div>
      </div>
    </div>
  </div>
</section>

Team from FilyTreck

Tailwind CSS

FilyTreck

Team member card grid with headshots and social links

A centered team section with a heading and intro paragraph above a two-column grid of six rounded cards. Each card shows a portrait, name, role, X and LinkedIn icon buttons, and a short bio.

<section class="py-24 md:py-40 bg-gray-50">
    <div class="container mx-auto px-4">
        <div class="mb-12 max-w-2xl mx-auto">
            <h3 class="mb-10 font-heading text-4xl md:text-5xl font-bold text-center leading-tight">Meet our team</h3>
            <p class="text-xl font-medium text-center leading-relaxed">Our diverse team of experts brings a wealth of experience in task management, time optimization, and goal achievement to deliver the best solutions to you.</p>
        </div>
        <div class="flex flex-wrap -m-2.5">
            <div class="w-full md:w-1/2 p-2.5">
                <div class="py-10 px-8 h-full bg-white rounded-3xl">
                    <div class="flex flex-wrap -m-5">
                        <div class="w-full lg:w-1/3 p-5">
                            <img class="object-cover transform hover:scale-105 rounded-3xl transition duration-200" style="width: 173px; height: 192px" src="fily-assets/team/pic.jpg" alt="">
                        </div>
                        <div class="w-full lg:w-2/3 p-5">
                            <div class="mb-6 pt-4 flex flex-wrap justify-between -m-2">
                                <div class="w-full lg:flex-1 p-2">
                                    <h3 class="font-heading text-2xl font-bold">Deacon Galvan</h3>
                                    <p class="text-sm text-blue-500 font-medium">Owner, Director</p>
                                </div>
                                <div class="w-full lg:w-auto p-2">
                                    <div class="flex flex-wrap -m-1">
                                        <div class="w-auto p-1">
                                            <a href="#" class="flex items-center justify-center w-10 h-10 bg-gray-50 rounded-full">
                                                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M12.3731 1.20053H14.7039L9.61187 7.02035L15.6022 14.9398H10.9118L7.23814 10.1367L3.03463 14.9398H0.702494L6.14886 8.71486L0.402344 1.20053H5.21177L8.53245 5.59076L12.3731 1.20053ZM11.5551 13.5447H12.8466L4.51001 2.52232H3.12411L11.5551 13.5447Z" fill="#060918"></path>
                                                </svg>
                                            </a>
                                        </div>
                                        <div class="w-auto p-1">
                                            <a href="#" class="flex items-center justify-center w-10 h-10 bg-gray-50 rounded-full">
                                                <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M0.25 1.89816C0.25 1.35922 0.438632 0.914602 0.815878 0.564307C1.19313 0.213996 1.68356 0.0388489 2.28716 0.0388489C2.87999 0.0388489 3.35963 0.211296 3.72611 0.556223C4.10336 0.911918 4.29199 1.37539 4.29199 1.94667C4.29199 2.46404 4.10876 2.89518 3.74228 3.2401C3.36503 3.5958 2.86921 3.77365 2.25483 3.77365H2.23866C1.64583 3.77365 1.16619 3.5958 0.79971 3.2401C0.433231 2.88441 0.25 2.43709 0.25 1.89816ZM0.460183 16.0451V5.24493H4.04947V16.0451H0.460183ZM6.03813 16.0451H9.62741V10.0145C9.62741 9.63721 9.67053 9.34619 9.75676 9.14141C9.90765 8.77493 10.1367 8.46504 10.4439 8.21175C10.7511 7.95845 11.1364 7.8318 11.5999 7.8318C12.8071 7.8318 13.4107 8.64558 13.4107 10.2732V16.0451H17V9.8528C17 8.25755 16.6228 7.04766 15.8682 6.22309C15.1137 5.39853 14.1167 4.98624 12.8772 4.98624C11.4867 4.98624 10.4035 5.58446 9.62741 6.78089V6.81322H9.61125L9.62741 6.78089V5.24493H6.03813C6.05968 5.58984 6.07046 6.66231 6.07046 8.46235C6.07046 10.2624 6.05968 12.79 6.03813 16.0451Z" fill="#060918"></path>
                                                </svg>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <p class="text-gray-500 font-medium leading-relaxed">Nunc porttitor, purus et ultricies porta, nisi magna gravida tortor, molestie lobortis tortor diam mattis mauris cras at lacinia.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/2 p-2.5">
                <div class="py-10 px-8 h-full bg-white rounded-3xl">
                    <div class="flex flex-wrap -m-5">
                        <div class="w-full lg:w-1/3 p-5">
                            <img class="object-cover transform hover:scale-105 rounded-3xl transition duration-200" style="width: 173px; height: 192px" src="fily-assets/team/pic2.jpg" alt="">
                        </div>
                        <div class="w-full lg:w-2/3 p-5">
                            <div class="mb-6 pt-4 flex flex-wrap justify-between -m-2">
                                <div class="w-full lg:flex-1 p-2">
                                    <h3 class="font-heading text-2xl font-bold">Natasha Adams</h3>
                                    <p class="text-sm text-blue-500 font-medium">CEO, Founder</p>
                                </div>
                                <div class="w-full lg:w-auto p-2">
                                    <div class="flex flex-wrap -m-1">
                                        <div class="w-auto p-1">
                                            <a href="#" class="flex items-center justify-center w-10 h-10 bg-gray-50 rounded-full">
                                                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M12.3731 1.20053H14.7039L9.61187 7.02035L15.6022 14.9398H10.9118L7.23814 10.1367L3.03463 14.9398H0.702494L6.14886 8.71486L0.402344 1.20053H5.21177L8.53245 5.59076L12.3731 1.20053ZM11.5551 13.5447H12.8466L4.51001 2.52232H3.12411L11.5551 13.5447Z" fill="#060918"></path>
                                                </svg>
                                            </a>
                                        </div>
                                        <div class="w-auto p-1">
                                            <a href="#" class="flex items-center justify-center w-10 h-10 bg-gray-50 rounded-full">
                                                <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M0.25 1.89816C0.25 1.35922 0.438632 0.914602 0.815878 0.564307C1.19313 0.213996 1.68356 0.0388489 2.28716 0.0388489C2.87999 0.0388489 3.35963 0.211296 3.72611 0.556223C4.10336 0.911918 4.29199 1.37539 4.29199 1.94667C4.29199 2.46404 4.10876 2.89518 3.74228 3.2401C3.36503 3.5958 2.86921 3.77365 2.25483 3.77365H2.23866C1.64583 3.77365 1.16619 3.5958 0.79971 3.2401C0.433231 2.88441 0.25 2.43709 0.25 1.89816ZM0.460183 16.0451V5.24493H4.04947V16.0451H0.460183ZM6.03813 16.0451H9.62741V10.0145C9.62741 9.63721 9.67053 9.34619 9.75676 9.14141C9.90765 8.77493 10.1367 8.46504 10.4439 8.21175C10.7511 7.95845 11.1364 7.8318 11.5999 7.8318C12.8071 7.8318 13.4107 8.64558 13.4107 10.2732V16.0451H17V9.8528C17 8.25755 16.6228 7.04766 15.8682 6.22309C15.1137 5.39853 14.1167 4.98624 12.8772 4.98624C11.4867 4.98624 10.4035 5.58446 9.62741 6.78089V6.81322H9.61125L9.62741 6.78089V5.24493H6.03813C6.05968 5.58984 6.07046 6.66231 6.07046 8.46235C6.07046 10.2624 6.05968 12.79 6.03813 16.0451Z" fill="#060918"></path>
                                                </svg>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <p class="text-gray-500 font-medium leading-relaxed">Proin consequat risus a augue lobortis fermentum. Donec ex nunc, vestibulum eu porttitor efficitur, semper ultrices odio.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/2 p-2.5">
                <div class="py-10 px-8 h-full bg-white rounded-3xl">
                    <div class="flex flex-wrap -m-5">
                        <div class="w-full lg:w-1/3 p-5">
                            <img class="object-cover transform hover:scale-105 rounded-3xl transition duration-200" style="width: 173px; height: 192px" src="fily-assets/team/pic3.jpg" alt="">
                        </div>
                        <div class="w-full lg:w-2/3 p-5">
                            <div class="mb-6 pt-4 flex flex-wrap justify-between -m-2">
                                <div class="w-full lg:flex-1 p-2">
                                    <h3 class="font-heading text-2xl font-bold">Jenna Hines</h3>
                                    <p class="text-sm text-blue-500 font-medium">CEO, Founder</p>
                                </div>
                                <div class="w-full lg:w-auto p-2">
                                    <div class="flex flex-wrap -m-1">
                                        <div class="w-auto p-1">
                                            <a href="#" class="flex items-center justify-center w-10 h-10 bg-gray-50 rounded-full">
                                                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M12.3731 1.20053H14.7039L9.61187 7.02035L15.6022 14.9398H10.9118L7.23814 10.1367L3.03463 14.9398H0.702494L6.14886 8.71486L0.402344 1.20053H5.21177L8.53245 5.59076L12.3731 1.20053ZM11.5551 13.5447H12.8466L4.51001 2.52232H3.12411L11.5551 13.5447Z" fill="#060918"></path>
                                                </svg>
                                            </a>
                                        </div>
                                        <div class="w-auto p-1">
                                            <a href="#" class="flex items-center justify-center w-10 h-10 bg-gray-50 rounded-full">
                                                <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M0.25 1.89816C0.25 1.35922 0.438632 0.914602 0.815878 0.564307C1.19313 0.213996 1.68356 0.0388489 2.28716 0.0388489C2.87999 0.0388489 3.35963 0.211296 3.72611 0.556223C4.10336 0.911918 4.29199 1.37539 4.29199 1.94667C4.29199 2.46404 4.10876 2.89518 3.74228 3.2401C3.36503 3.5958 2.86921 3.77365 2.25483 3.77365H2.23866C1.64583 3.77365 1.16619 3.5958 0.79971 3.2401C0.433231 2.88441 0.25 2.43709 0.25 1.89816ZM0.460183 16.0451V5.24493H4.04947V16.0451H0.460183ZM6.03813 16.0451H9.62741V10.0145C9.62741 9.63721 9.67053 9.34619 9.75676 9.14141C9.90765 8.77493 10.1367 8.46504 10.4439 8.21175C10.7511 7.95845 11.1364 7.8318 11.5999 7.8318C12.8071 7.8318 13.4107 8.64558 13.4107 10.2732V16.0451H17V9.8528C17 8.25755 16.6228 7.04766 15.8682 6.22309C15.1137 5.39853 14.1167 4.98624 12.8772 4.98624C11.4867 4.98624 10.4035 5.58446 9.62741 6.78089V6.81322H9.61125L9.62741 6.78089V5.24493H6.03813C6.05968 5.58984 6.07046 6.66231 6.07046 8.46235C6.07046 10.2624 6.05968 12.79 6.03813 16.0451Z" fill="#060918"></path>
                                                </svg>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <p class="text-gray-500 font-medium leading-relaxed">Proin consequat risus a augue lobortis fermentum. Donec ex nunc, vestibulum eu porttitor efficitur, semper ultrices odio.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/2 p-2.5">
                <div class="py-10 px-8 h-full bg-white rounded-3xl">
                    <div class="flex flex-wrap -m-5">
                        <div class="w-full lg:w-1/3 p-5">
                            <img class="object-cover transform hover:scale-105 rounded-3xl transition duration-200" style="width: 173px; height: 192px" src="fily-assets/team/pic4.jpg" alt="">
                        </div>
                        <div class="w-full lg:w-2/3 p-5">
                            <div class="mb-6 pt-4 flex flex-wrap justify-between -m-2">
                                <div class="w-full lg:flex-1 p-2">
                                    <h3 class="font-heading text-2xl font-bold">Johnathan Barton</h3>
                                    <p class="text-sm text-blue-500 font-medium">Owner, Director</p>
                                </div>
                                <div class="w-full lg:w-auto p-2">
                                    <div class="flex flex-wrap -m-1">
                                        <div class="w-auto p-1">
                                            <a href="#" class="flex items-center justify-center w-10 h-10 bg-gray-50 rounded-full">
                                                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M12.3731 1.20053H14.7039L9.61187 7.02035L15.6022 14.9398H10.9118L7.23814 10.1367L3.03463 14.9398H0.702494L6.14886 8.71486L0.402344 1.20053H5.21177L8.53245 5.59076L12.3731 1.20053ZM11.5551 13.5447H12.8466L4.51001 2.52232H3.12411L11.5551 13.5447Z" fill="#060918"></path>
                                                </svg>
                                            </a>
                                        </div>
                                        <div class="w-auto p-1">
                                            <a href="#" class="flex items-center justify-center w-10 h-10 bg-gray-50 rounded-full">
                                                <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M0.25 1.89816C0.25 1.35922 0.438632 0.914602 0.815878 0.564307C1.19313 0.213996 1.68356 0.0388489 2.28716 0.0388489C2.87999 0.0388489 3.35963 0.211296 3.72611 0.556223C4.10336 0.911918 4.29199 1.37539 4.29199 1.94667C4.29199 2.46404 4.10876 2.89518 3.74228 3.2401C3.36503 3.5958 2.86921 3.77365 2.25483 3.77365H2.23866C1.64583 3.77365 1.16619 3.5958 0.79971 3.2401C0.433231 2.88441 0.25 2.43709 0.25 1.89816ZM0.460183 16.0451V5.24493H4.04947V16.0451H0.460183ZM6.03813 16.0451H9.62741V10.0145C9.62741 9.63721 9.67053 9.34619 9.75676 9.14141C9.90765 8.77493 10.1367 8.46504 10.4439 8.21175C10.7511 7.95845 11.1364 7.8318 11.5999 7.8318C12.8071 7.8318 13.4107 8.64558 13.4107 10.2732V16.0451H17V9.8528C17 8.25755 16.6228 7.04766 15.8682 6.22309C15.1137 5.39853 14.1167 4.98624 12.8772 4.98624C11.4867 4.98624 10.4035 5.58446 9.62741 6.78089V6.81322H9.61125L9.62741 6.78089V5.24493H6.03813C6.05968 5.58984 6.07046 6.66231 6.07046 8.46235C6.07046 10.2624 6.05968 12.79 6.03813 16.0451Z" fill="#060918"></path>
                                                </svg>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <p class="text-gray-500 font-medium leading-relaxed">Nunc porttitor, purus et ultricies porta, nisi magna gravida tortor, molestie lobortis tortor diam mattis mauris cras at lacinia.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/2 p-2.5">
                <div class="py-10 px-8 h-full bg-white rounded-3xl">
                    <div class="flex flex-wrap -m-5">
                        <div class="w-full lg:w-1/3 p-5">
                            <img class="object-cover transform hover:scale-105 rounded-3xl transition duration-200" style="width: 173px; height: 192px" src="fily-assets/team/pic5.jpg" alt="">
                        </div>
                        <div class="w-full lg:w-2/3 p-5">
                            <div class="mb-6 pt-4 flex flex-wrap justify-between -m-2">
                                <div class="w-full lg:flex-1 p-2">
                                    <h3 class="font-heading text-2xl font-bold">Heath Kaufman</h3>
                                    <p class="text-sm text-blue-500 font-medium">Owner, Director</p>
                                </div>
                                <div class="w-full lg:w-auto p-2">
                                    <div class="flex flex-wrap -m-1">
                                        <div class="w-auto p-1">
                                            <a href="#" class="flex items-center justify-center w-10 h-10 bg-gray-50 rounded-full">
                                                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M12.3731 1.20053H14.7039L9.61187 7.02035L15.6022 14.9398H10.9118L7.23814 10.1367L3.03463 14.9398H0.702494L6.14886 8.71486L0.402344 1.20053H5.21177L8.53245 5.59076L12.3731 1.20053ZM11.5551 13.5447H12.8466L4.51001 2.52232H3.12411L11.5551 13.5447Z" fill="#060918"></path>
                                                </svg>
                                            </a>
                                        </div>
                                        <div class="w-auto p-1">
                                            <a href="#" class="flex items-center justify-center w-10 h-10 bg-gray-50 rounded-full">
                                                <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M0.25 1.89816C0.25 1.35922 0.438632 0.914602 0.815878 0.564307C1.19313 0.213996 1.68356 0.0388489 2.28716 0.0388489C2.87999 0.0388489 3.35963 0.211296 3.72611 0.556223C4.10336 0.911918 4.29199 1.37539 4.29199 1.94667C4.29199 2.46404 4.10876 2.89518 3.74228 3.2401C3.36503 3.5958 2.86921 3.77365 2.25483 3.77365H2.23866C1.64583 3.77365 1.16619 3.5958 0.79971 3.2401C0.433231 2.88441 0.25 2.43709 0.25 1.89816ZM0.460183 16.0451V5.24493H4.04947V16.0451H0.460183ZM6.03813 16.0451H9.62741V10.0145C9.62741 9.63721 9.67053 9.34619 9.75676 9.14141C9.90765 8.77493 10.1367 8.46504 10.4439 8.21175C10.7511 7.95845 11.1364 7.8318 11.5999 7.8318C12.8071 7.8318 13.4107 8.64558 13.4107 10.2732V16.0451H17V9.8528C17 8.25755 16.6228 7.04766 15.8682 6.22309C15.1137 5.39853 14.1167 4.98624 12.8772 4.98624C11.4867 4.98624 10.4035 5.58446 9.62741 6.78089V6.81322H9.61125L9.62741 6.78089V5.24493H6.03813C6.05968 5.58984 6.07046 6.66231 6.07046 8.46235C6.07046 10.2624 6.05968 12.79 6.03813 16.0451Z" fill="#060918"></path>
                                                </svg>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <p class="text-gray-500 font-medium leading-relaxed">Nunc porttitor, purus et ultricies porta, nisi magna gravida tortor, molestie lobortis tortor diam mattis mauris cras at lacinia.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/2 p-2.5">
                <div class="py-10 px-8 h-full bg-white rounded-3xl">
                    <div class="flex flex-wrap -m-5">
                        <div class="w-full lg:w-1/3 p-5">
                            <img class="object-cover transform hover:scale-105 rounded-3xl transition duration-200" style="width: 173px; height: 192px" src="fily-assets/team/pic6.jpg" alt="">
                        </div>
                        <div class="w-full lg:w-2/3 p-5">
                            <div class="mb-6 pt-4 flex flex-wrap justify-between -m-2">
                                <div class="w-full lg:flex-1 p-2">
                                    <h3 class="font-heading text-2xl font-bold">Aleeza Keller</h3>
                                    <p class="text-sm text-blue-500 font-medium">CEO, Founder</p>
                                </div>
                                <div class="w-full lg:w-auto p-2">
                                    <div class="flex flex-wrap -m-1">
                                        <div class="w-auto p-1">
                                            <a href="#" class="flex items-center justify-center w-10 h-10 bg-gray-50 rounded-full">
                                                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M12.3731 1.20053H14.7039L9.61187 7.02035L15.6022 14.9398H10.9118L7.23814 10.1367L3.03463 14.9398H0.702494L6.14886 8.71486L0.402344 1.20053H5.21177L8.53245 5.59076L12.3731 1.20053ZM11.5551 13.5447H12.8466L4.51001 2.52232H3.12411L11.5551 13.5447Z" fill="#060918"></path>
                                                </svg>
                                            </a>
                                        </div>
                                        <div class="w-auto p-1">
                                            <a href="#" class="flex items-center justify-center w-10 h-10 bg-gray-50 rounded-full">
                                                <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M0.25 1.89816C0.25 1.35922 0.438632 0.914602 0.815878 0.564307C1.19313 0.213996 1.68356 0.0388489 2.28716 0.0388489C2.87999 0.0388489 3.35963 0.211296 3.72611 0.556223C4.10336 0.911918 4.29199 1.37539 4.29199 1.94667C4.29199 2.46404 4.10876 2.89518 3.74228 3.2401C3.36503 3.5958 2.86921 3.77365 2.25483 3.77365H2.23866C1.64583 3.77365 1.16619 3.5958 0.79971 3.2401C0.433231 2.88441 0.25 2.43709 0.25 1.89816ZM0.460183 16.0451V5.24493H4.04947V16.0451H0.460183ZM6.03813 16.0451H9.62741V10.0145C9.62741 9.63721 9.67053 9.34619 9.75676 9.14141C9.90765 8.77493 10.1367 8.46504 10.4439 8.21175C10.7511 7.95845 11.1364 7.8318 11.5999 7.8318C12.8071 7.8318 13.4107 8.64558 13.4107 10.2732V16.0451H17V9.8528C17 8.25755 16.6228 7.04766 15.8682 6.22309C15.1137 5.39853 14.1167 4.98624 12.8772 4.98624C11.4867 4.98624 10.4035 5.58446 9.62741 6.78089V6.81322H9.61125L9.62741 6.78089V5.24493H6.03813C6.05968 5.58984 6.07046 6.66231 6.07046 8.46235C6.07046 10.2624 6.05968 12.79 6.03813 16.0451Z" fill="#060918"></path>
                                                </svg>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <p class="text-gray-500 font-medium leading-relaxed">Proin consequat risus a augue lobortis fermentum. Donec ex nunc, vestibulum eu porttitor efficitur, semper ultrices odio.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Team from Aurora

Tailwind CSS

Aurora

Meet our team grid with six member cards

A light-background team section with a centered heading and a 3-column grid of bordered cards, each showing a circular portrait, name, role, and Twitter and LinkedIn icons. It introduces company leadership and staff in a simple, spacious layout.

<section class="py-12 md:py-24">
  <div class="container px-4 mx-auto">
    <div class="max-w-6xl mx-auto">
      <h1 class="text-center font-heading tracking-tight text-4xl sm:text-5xl font-bold mb-20">Meet our team</h1>
      <div class="flex flex-wrap -mx-4 -mb-8">
        <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
          <div class="p-8 border-2 border-gray-100 rounded-xl">
            <img class="block h-36 w-36 mb-8 mx-auto" src="aurora-assets/team/avatar-6.png" alt="">
            <div class="text-center mb-4">
              <span class="block text-2xl font-bold mb-2">Armand Bretmann</span>
              <span class="block text-lg text-gray-700 font-medium">CEO &amp; Founder</span>
            </div>
            <div class="flex items-center justify-center">
              <a class="inline-block text-gray-900 hover:text-yellowGreen-600 mr-4" href="#">
                <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g clip-path="url(#clip0_2984_23486)">
                    <path d="M23.334 3.01006C23.334 3.01006 21.3161 4.20217 20.194 4.54006C19.5917 3.84757 18.7913 3.35675 17.901 3.13398C17.0107 2.91122 16.0735 2.96725 15.2161 3.29451C14.3587 3.62177 13.6224 4.20446 13.107 4.96377C12.5915 5.72309 12.3217 6.62239 12.334 7.54006V8.54006C10.5766 8.58562 8.83526 8.19587 7.26499 7.4055C5.69473 6.61513 4.3443 5.44869 3.33398 4.01006C3.33398 4.01006 -0.666016 13.0101 8.33398 17.0101C6.27451 18.408 3.82114 19.109 1.33398 19.0101C10.334 24.0101 21.334 19.0101 21.334 7.51006C21.3331 7.23151 21.3063 6.95365 21.254 6.68006C22.2746 5.67355 23.334 3.01006 23.334 3.01006Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </g>
                </svg>
              </a>
              <a class="inline-block text-gray-900 hover:text-yellowGreen-600" href="#">
                <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M21.334 8V16C21.334 18.7614 19.0954 21 16.334 21H8.33398C5.57256 21 3.33398 18.7614 3.33398 16V8C3.33398 5.23858 5.57256 3 8.33398 3H16.334C19.0954 3 21.334 5.23858 21.334 8Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M7.33398 17V13.5V10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M11.334 17V13.75M11.334 10V13.75M11.334 13.75C11.334 10 17.334 10 17.334 13.75V17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M7.33398 7.01L7.34398 6.99889" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
          <div class="p-8 border-2 border-gray-100 rounded-xl">
            <img class="block h-36 w-36 mb-8 mx-auto" src="aurora-assets/team/avatar-5.png" alt="">
            <div class="text-center mb-4">
              <span class="block text-2xl font-bold mb-2">Ann Franci</span>
              <span class="block text-lg text-gray-700 font-medium">Co-Founder</span>
            </div>
            <div class="flex items-center justify-center">
              <a class="inline-block text-gray-900 hover:text-yellowGreen-600 mr-4" href="#">
                <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g clip-path="url(#clip0_2984_23486)">
                    <path d="M23.334 3.01006C23.334 3.01006 21.3161 4.20217 20.194 4.54006C19.5917 3.84757 18.7913 3.35675 17.901 3.13398C17.0107 2.91122 16.0735 2.96725 15.2161 3.29451C14.3587 3.62177 13.6224 4.20446 13.107 4.96377C12.5915 5.72309 12.3217 6.62239 12.334 7.54006V8.54006C10.5766 8.58562 8.83526 8.19587 7.26499 7.4055C5.69473 6.61513 4.3443 5.44869 3.33398 4.01006C3.33398 4.01006 -0.666016 13.0101 8.33398 17.0101C6.27451 18.408 3.82114 19.109 1.33398 19.0101C10.334 24.0101 21.334 19.0101 21.334 7.51006C21.3331 7.23151 21.3063 6.95365 21.254 6.68006C22.2746 5.67355 23.334 3.01006 23.334 3.01006Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </g>
                </svg>
              </a>
              <a class="inline-block text-gray-900 hover:text-yellowGreen-600" href="#">
                <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M21.334 8V16C21.334 18.7614 19.0954 21 16.334 21H8.33398C5.57256 21 3.33398 18.7614 3.33398 16V8C3.33398 5.23858 5.57256 3 8.33398 3H16.334C19.0954 3 21.334 5.23858 21.334 8Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M7.33398 17V13.5V10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M11.334 17V13.75M11.334 10V13.75M11.334 13.75C11.334 10 17.334 10 17.334 13.75V17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M7.33398 7.01L7.34398 6.99889" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
          <div class="p-8 border-2 border-gray-100 rounded-xl">
            <img class="block h-36 w-36 mb-8 mx-auto" src="aurora-assets/team/avatar-4.png" alt="">
            <div class="text-center mb-4">
              <span class="block text-2xl font-bold mb-2">Ryan Rosser</span>
              <span class="block text-lg text-gray-700 font-medium">COO</span>
            </div>
            <div class="flex items-center justify-center">
              <a class="inline-block text-gray-900 hover:text-yellowGreen-600 mr-4" href="#">
                <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g clip-path="url(#clip0_2984_23486)">
                    <path d="M23.334 3.01006C23.334 3.01006 21.3161 4.20217 20.194 4.54006C19.5917 3.84757 18.7913 3.35675 17.901 3.13398C17.0107 2.91122 16.0735 2.96725 15.2161 3.29451C14.3587 3.62177 13.6224 4.20446 13.107 4.96377C12.5915 5.72309 12.3217 6.62239 12.334 7.54006V8.54006C10.5766 8.58562 8.83526 8.19587 7.26499 7.4055C5.69473 6.61513 4.3443 5.44869 3.33398 4.01006C3.33398 4.01006 -0.666016 13.0101 8.33398 17.0101C6.27451 18.408 3.82114 19.109 1.33398 19.0101C10.334 24.0101 21.334 19.0101 21.334 7.51006C21.3331 7.23151 21.3063 6.95365 21.254 6.68006C22.2746 5.67355 23.334 3.01006 23.334 3.01006Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </g>
                </svg>
              </a>
              <a class="inline-block text-gray-900 hover:text-yellowGreen-600" href="#">
                <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M21.334 8V16C21.334 18.7614 19.0954 21 16.334 21H8.33398C5.57256 21 3.33398 18.7614 3.33398 16V8C3.33398 5.23858 5.57256 3 8.33398 3H16.334C19.0954 3 21.334 5.23858 21.334 8Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M7.33398 17V13.5V10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M11.334 17V13.75M11.334 10V13.75M11.334 13.75C11.334 10 17.334 10 17.334 13.75V17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M7.33398 7.01L7.34398 6.99889" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
          <div class="p-8 border-2 border-gray-100 rounded-xl">
            <img class="block h-36 w-36 mb-8 mx-auto" src="aurora-assets/team/avatar-3.png" alt="">
            <div class="text-center mb-4">
              <span class="block text-2xl font-bold mb-2">Marley Dokidis</span>
              <span class="block text-lg text-gray-700 font-medium">People Ops</span>
            </div>
            <div class="flex items-center justify-center">
              <a class="inline-block text-gray-900 hover:text-yellowGreen-600 mr-4" href="#">
                <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g clip-path="url(#clip0_2984_23486)">
                    <path d="M23.334 3.01006C23.334 3.01006 21.3161 4.20217 20.194 4.54006C19.5917 3.84757 18.7913 3.35675 17.901 3.13398C17.0107 2.91122 16.0735 2.96725 15.2161 3.29451C14.3587 3.62177 13.6224 4.20446 13.107 4.96377C12.5915 5.72309 12.3217 6.62239 12.334 7.54006V8.54006C10.5766 8.58562 8.83526 8.19587 7.26499 7.4055C5.69473 6.61513 4.3443 5.44869 3.33398 4.01006C3.33398 4.01006 -0.666016 13.0101 8.33398 17.0101C6.27451 18.408 3.82114 19.109 1.33398 19.0101C10.334 24.0101 21.334 19.0101 21.334 7.51006C21.3331 7.23151 21.3063 6.95365 21.254 6.68006C22.2746 5.67355 23.334 3.01006 23.334 3.01006Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </g>
                </svg>
              </a>
              <a class="inline-block text-gray-900 hover:text-yellowGreen-600" href="#">
                <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M21.334 8V16C21.334 18.7614 19.0954 21 16.334 21H8.33398C5.57256 21 3.33398 18.7614 3.33398 16V8C3.33398 5.23858 5.57256 3 8.33398 3H16.334C19.0954 3 21.334 5.23858 21.334 8Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M7.33398 17V13.5V10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M11.334 17V13.75M11.334 10V13.75M11.334 13.75C11.334 10 17.334 10 17.334 13.75V17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M7.33398 7.01L7.34398 6.99889" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
          <div class="p-8 border-2 border-gray-100 rounded-xl">
            <img class="block h-36 w-36 mb-8 mx-auto" src="aurora-assets/team/avatar-2.png" alt="">
            <div class="text-center mb-4">
              <span class="block text-2xl font-bold mb-2">Kaiya Saris</span>
              <span class="block text-lg text-gray-700 font-medium">Talent</span>
            </div>
            <div class="flex items-center justify-center">
              <a class="inline-block text-gray-900 hover:text-yellowGreen-600 mr-4" href="#">
                <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g clip-path="url(#clip0_2984_23486)">
                    <path d="M23.334 3.01006C23.334 3.01006 21.3161 4.20217 20.194 4.54006C19.5917 3.84757 18.7913 3.35675 17.901 3.13398C17.0107 2.91122 16.0735 2.96725 15.2161 3.29451C14.3587 3.62177 13.6224 4.20446 13.107 4.96377C12.5915 5.72309 12.3217 6.62239 12.334 7.54006V8.54006C10.5766 8.58562 8.83526 8.19587 7.26499 7.4055C5.69473 6.61513 4.3443 5.44869 3.33398 4.01006C3.33398 4.01006 -0.666016 13.0101 8.33398 17.0101C6.27451 18.408 3.82114 19.109 1.33398 19.0101C10.334 24.0101 21.334 19.0101 21.334 7.51006C21.3331 7.23151 21.3063 6.95365 21.254 6.68006C22.2746 5.67355 23.334 3.01006 23.334 3.01006Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </g>
                </svg>
              </a>
              <a class="inline-block text-gray-900 hover:text-yellowGreen-600" href="#">
                <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M21.334 8V16C21.334 18.7614 19.0954 21 16.334 21H8.33398C5.57256 21 3.33398 18.7614 3.33398 16V8C3.33398 5.23858 5.57256 3 8.33398 3H16.334C19.0954 3 21.334 5.23858 21.334 8Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M7.33398 17V13.5V10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M11.334 17V13.75M11.334 10V13.75M11.334 13.75C11.334 10 17.334 10 17.334 13.75V17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M7.33398 7.01L7.34398 6.99889" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
          <div class="p-8 border-2 border-gray-100 rounded-xl">
            <img class="block h-36 w-36 mb-8 mx-auto" src="aurora-assets/team/avatar-1.png" alt="">
            <div class="text-center mb-4">
              <span class="block text-2xl font-bold mb-2">Emerson Kenter</span>
              <span class="block text-lg text-gray-700 font-medium">Engineering</span>
            </div>
            <div class="flex items-center justify-center">
              <a class="inline-block text-gray-900 hover:text-yellowGreen-600 mr-4" href="#">
                <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g clip-path="url(#clip0_2984_23486)">
                    <path d="M23.334 3.01006C23.334 3.01006 21.3161 4.20217 20.194 4.54006C19.5917 3.84757 18.7913 3.35675 17.901 3.13398C17.0107 2.91122 16.0735 2.96725 15.2161 3.29451C14.3587 3.62177 13.6224 4.20446 13.107 4.96377C12.5915 5.72309 12.3217 6.62239 12.334 7.54006V8.54006C10.5766 8.58562 8.83526 8.19587 7.26499 7.4055C5.69473 6.61513 4.3443 5.44869 3.33398 4.01006C3.33398 4.01006 -0.666016 13.0101 8.33398 17.0101C6.27451 18.408 3.82114 19.109 1.33398 19.0101C10.334 24.0101 21.334 19.0101 21.334 7.51006C21.3331 7.23151 21.3063 6.95365 21.254 6.68006C22.2746 5.67355 23.334 3.01006 23.334 3.01006Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </g>
                </svg>
              </a>
              <a class="inline-block text-gray-900 hover:text-yellowGreen-600" href="#">
                <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M21.334 8V16C21.334 18.7614 19.0954 21 16.334 21H8.33398C5.57256 21 3.33398 18.7614 3.33398 16V8C3.33398 5.23858 5.57256 3 8.33398 3H16.334C19.0954 3 21.334 5.23858 21.334 8Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M7.33398 17V13.5V10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M11.334 17V13.75M11.334 10V13.75M11.334 13.75C11.334 10 17.334 10 17.334 13.75V17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M7.33398 7.01L7.34398 6.99889" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Team from asitrastudio

Tailwind CSS

asitrastudio

Meet the Team Grid with Circular Avatars

A light-background team section with a large heading on the left and a three-column grid of circular profile photos, each labeled with the role Executive Chairman and a person's name. A text link labeled See more people sits beneath the heading.

<section class="py-12 md:py-20 bg-coolGray-50">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-5/12 xl:w-1/3 px-4 mb-20 lg:mb-0">
        <div>
          <h1 class="font-heading text-6xl sm:text-8xl md:text-10xl tracking-tighter mb-10">Meet the team</h1>
          <a class="group inline-flex items-center leading-none font-medium pb-2 border-b-2 border-black" href="#">
            <span class="mr-4">See more people</span>
            <span class="group-hover:rotate-45 transform transition duration-100">
              <svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9.5 1.5L1.5 9.5" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M9.5 8.83571V1.5H2.16429" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </span>
          </a>
        </div>
      </div>
      <div class="w-full lg:w-7/12 xl:w-8/12 px-4">
        <div class="flex flex-wrap -mx-4">
          <div class="w-1/2 md:w-1/3 lg:w-1/2 xl:w-1/3 px-4 mb-12">
            <div>
              <img class="block mb-6" src="asitrastudio-assets/team/team-avatar1.png" alt="">
              <span class="block mb-2 text-sm text-coolGray-600">Executive Chairman</span>
              <span class="block text-2xl sm:text-3xl tracking-tight">Jacob Jones</span>
            </div>
          </div>
          <div class="w-1/2 md:w-1/3 lg:w-1/2 xl:w-1/3 px-4 mb-12">
            <div>
              <img class="block mb-6" src="asitrastudio-assets/team/team-avatar2.png" alt="">
              <span class="block mb-2 text-sm text-coolGray-600">Executive Chairman</span>
              <span class="block text-2xl sm:text-3xl tracking-tight">Ronald Richards</span>
            </div>
          </div>
          <div class="w-1/2 md:w-1/3 lg:w-1/2 xl:w-1/3 px-4 mb-12">
            <div>
              <img class="block mb-6" src="asitrastudio-assets/team/team-avatar3.png" alt="">
              <span class="block mb-2 text-sm text-coolGray-600">Executive Chairman</span>
              <span class="block text-2xl sm:text-3xl tracking-tight">Leslie Alexander</span>
            </div>
          </div>
          <div class="w-1/2 md:w-1/3 lg:w-1/2 xl:w-1/3 px-4 mb-12">
            <div>
              <img class="block mb-6" src="asitrastudio-assets/team/team-avatar4.png" alt="">
              <span class="block mb-2 text-sm text-coolGray-600">Executive Chairman</span>
              <span class="block text-2xl sm:text-3xl tracking-tight">Darlene Robertson</span>
            </div>
          </div>
          <div class="w-1/2 md:w-1/3 lg:w-1/2 xl:w-1/3 px-4 mb-12">
            <div>
              <img class="block mb-6" src="asitrastudio-assets/team/team-avatar5.png" alt="">
              <span class="block mb-2 text-sm text-coolGray-600">Executive Chairman</span>
              <span class="block text-2xl sm:text-3xl tracking-tight">Cody Fisher</span>
            </div>
          </div>
          <div class="w-1/2 md:w-1/3 lg:w-1/2 xl:w-1/3 px-4 mb-12">
            <div>
              <img class="block mb-6" src="asitrastudio-assets/team/team-avatar6.png" alt="">
              <span class="block mb-2 text-sm text-coolGray-600">Executive Chairman</span>
              <span class="block text-2xl sm:text-3xl tracking-tight">Courtney Henry</span>
            </div>
          </div>
          <div class="w-1/2 md:w-1/3 lg:w-1/2 xl:w-1/3 px-4 mb-12">
            <div>
              <img class="block mb-6" src="asitrastudio-assets/team/team-avatar2.png" alt="">
              <span class="block mb-2 text-sm text-coolGray-600">Executive Chairman</span>
              <span class="block text-2xl sm:text-3xl tracking-tight">Robert Fox</span>
            </div>
          </div>
          <div class="w-1/2 md:w-1/3 lg:w-1/2 xl:w-1/3 px-4 mb-12">
            <div>
              <img class="block mb-6" src="asitrastudio-assets/team/team-avatar3.png" alt="">
              <span class="block mb-2 text-sm text-coolGray-600">Executive Chairman</span>
              <span class="block text-2xl sm:text-3xl tracking-tight">Annette Black</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Team from Consulty

Tailwind CSS

Consulty

Team Intro Hero with Staggered Portrait Gallery

A marketing hero section with a large left-aligned heading and short supporting text above a horizontal row of rounded portrait photos of varying sizes, with a few solid color blocks as placeholders. It introduces a team on a light background and is intended for a SaaS or agency landing page.

<section class="px-8 md:px-24 py-32">
    <h1 class="font-heading tracking-tight text-5xl md:text-6xl font-medium mb-6 max-w-sm md:max-w-lg">The team behind successful product</h1>
    <p class="tracking-tight text-lg text-gray-700 mb-24 max-w-xl">Consulty gives you the blocks &amp; components you need to create a truly professional website, landing page or admin panel for your SaaS.</p>
    <div class="flex flex-wrap -m-4">
        <div class="w-full md:w-1/2 lg:w-2/12 p-4">
            <img class="rounded-2xl h-56 w-full object-cover mb-6" src="consulty-assets/team/picture1.png" alt="">
            <img class="rounded-2xl h-28 w-full object-cover" src="consulty-assets/team/shapes-box1.png" alt="">
        </div>
        <div class="w-full md:w-1/2 lg:w-3/12 p-4">
            <img class="rounded-2xl w-full object-cover" style="height:360px;" src="consulty-assets/team/picture2.png" alt="">
        </div>
        <div class="w-full md:w-1/2 lg:w-3/12 p-4">
            <div class="flex gap-6">
                <img class="rounded-2xl w-16 object-cover" style="height:360px;" src="consulty-assets/team/shapes-box2.png" alt="">
                <div class="flex-1">
                    <img class="rounded-2xl w-full object-cover mb-6" style="height:165px;" src="consulty-assets/team/picture3.png" alt="">
                    <img class="rounded-2xl w-full object-cover" style="height:165px;" src="consulty-assets/team/picture4.png" alt="">
                </div>
            </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-4/12 p-4">
            <img class="rounded-2xl w-full object-cover" style="height:360px;" src="consulty-assets/team/picture5.png" alt="">
        </div>
    </div>
</section>

Team from Suncealand

Tailwind CSS

Suncealand

Team Member Card Carousel with Serif Heading

A marketing section titled "Meet our great team" with a subtitle and a horizontal row of three team member cards, each showing a photo on a colored background, initials badge, name, and role, with previous/next arrow controls at the sides. The middle card is offset vertically, giving the row a staggered appearance.

<section class="py-20 md:py-40 bg-purple-50" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="container px-4 mx-auto">
    <div class="text-center mb-24">
      <h1 class="text-6xl sm:text-7xl xl:text-8xl font-heading font-semibold mb-10">Meet our great team</h1>
      <p class="text-2xl">Record your audio and upload it now.</p>
    </div>
    <div class="max-w-lg lg:max-w-7xl mx-auto px-10 relative">
      <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="hidden lg:inline-block absolute top-0 left-0 mt-14 p-1">
        <svg width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M7.99906 16L9.41406 14.585L3.82906 9L2.74902 8L3.82906 7L9.41406 1.415L7.99906 8.29971e-07L-0.000937445 8L7.99906 16Z" fill="#04082F"></path>
        </svg>
      </button>
      <div class="md:max-w-3xl xl:max-w-5xl mx-auto">
        <div class="overflow-hidden pt-6">
            <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out -m-5">
                <div x-ref="slide1" class="flex-shrink-0 w-full p-5">
                    <div class="flex flex-wrap justify-between -mx-4 2xl:-mx-10">
                      <div class="w-full lg:w-1/3 px-4 2xl:px-10 mb-16 xl:mb-0">
                        <div class="max-w-xs mx-auto">
                          <div class="relative h-44 bg-yellow-500 rounded-t-xl">
                            <div class="absolute z-10 bottom-0 left-0 ml-8 mb-3 flex items-center justify-center w-15 h-15 bg-white rounded-full border-3 border-black text-2xl font-semibold text-black">LC</div>
                            <img class="absolute bottom-0 left-1/2 transform -translate-x-1/2 xl:h-52 object-contain xl:object-cover" src="suncealand-assets/images/portait-without-background3.png" alt="">
                          </div>
                          <div class="px-8 pt-6 pb-8 bg-white rounded-b-xl">
                            <h4 class="text-2xl font-medium">Lill Caoimhin</h4>
                            <span>Co-Founder</span>
                          </div>
                        </div>
                      </div>
                      <div class="w-full lg:w-1/3 px-4 2xl:px-10 sm:pt-6 mb-16 xl:mb-0">
                        <div class="sm:animate-bouncingSlow max-w-xs mx-auto">
                          <div class="relative h-44 bg-blue-500 rounded-t-xl">
                            <div class="absolute z-10 bottom-0 left-0 ml-8 mb-3 flex items-center justify-center w-15 h-15 bg-white rounded-full border-3 border-black text-2xl font-semibold text-black">MA</div>
                            <img class="absolute bottom-0 left-1/2 transform -translate-x-1/2 xl:h-52 object-contain xl:object-cover" src="suncealand-assets/images/portait-without-background2.png" alt="">
                          </div>
                          <div class="px-8 pt-6 pb-8 bg-white rounded-b-xl">
                            <h4 class="text-2xl font-medium">Meave Anders</h4>
                            <span>Co-Founder</span>
                          </div>
                        </div>
                      </div>
                      <div class="w-full lg:w-1/3 px-4 2xl:px-10">
                        <div class="max-w-xs mx-auto">
                          <div class="relative h-44 bg-indigo-500 rounded-t-xl">
                            <div class="absolute z-10 bottom-0 left-0 ml-8 mb-3 flex items-center justify-center w-15 h-15 bg-white rounded-full border-3 border-black text-2xl font-semibold text-black">CR</div>
                            <img class="absolute bottom-0 left-1/2 transform -translate-x-1/2 xl:h-52 object-contain xl:object-cover" src="suncealand-assets/images/portait-without-background1.png" alt="">
                          </div>
                          <div class="px-8 pt-6 pb-8 bg-white rounded-b-xl">
                            <h4 class="text-2xl font-medium">Calvin Ramsay</h4>
                            <span>Graphic Designer</span>
                          </div>
                        </div>
                      </div>
                    </div>
                </div>
                <div x-ref="slide2" class="flex-shrink-0 w-full p-5">
                    <div class="flex flex-wrap justify-between -mx-4 2xl:-mx-10">
                      <div class="w-full lg:w-1/3 px-4 2xl:px-10 mb-16 xl:mb-0">
                        <div class="max-w-xs mx-auto">
                          <div class="relative h-44 bg-yellow-500 rounded-t-xl">
                            <div class="absolute z-10 bottom-0 left-0 ml-8 mb-3 flex items-center justify-center w-15 h-15 bg-white rounded-full border-3 border-black text-2xl font-semibold text-black">JP</div>
                            <img class="absolute bottom-0 left-1/2 transform -translate-x-1/2 xl:h-52 object-contain xl:object-cover" src="suncealand-assets/images/portait-without-background3.png" alt="">
                          </div>
                          <div class="px-8 pt-6 pb-8 bg-white rounded-b-xl">
                            <h4 class="text-2xl font-medium">Jenna Park</h4>
                            <span>Marketing Coordinator</span>
                          </div>
                        </div>
                      </div>
                      <div class="w-full lg:w-1/3 px-4 2xl:px-10 sm:pt-6 mb-16 xl:mb-0">
                        <div class="sm:animate-bouncingSlow max-w-xs mx-auto">
                          <div class="relative h-44 bg-blue-500 rounded-t-xl">
                            <div class="absolute z-10 bottom-0 left-0 ml-8 mb-3 flex items-center justify-center w-15 h-15 bg-white rounded-full border-3 border-black text-2xl font-semibold text-black">MW</div>
                            <img class="absolute bottom-0 left-1/2 transform -translate-x-1/2 xl:h-52 object-contain xl:object-cover" src="suncealand-assets/images/portait-without-background2.png" alt="">
                          </div>
                          <div class="px-8 pt-6 pb-8 bg-white rounded-b-xl">
                            <h4 class="text-2xl font-medium">Marcus Wong</h4>
                            <span>Software Engineer</span>
                          </div>
                        </div>
                      </div>
                      <div class="w-full lg:w-1/3 px-4 2xl:px-10">
                        <div class="max-w-xs mx-auto">
                          <div class="relative h-44 bg-indigo-500 rounded-t-xl">
                            <div class="absolute z-10 bottom-0 left-0 ml-8 mb-3 flex items-center justify-center w-15 h-15 bg-white rounded-full border-3 border-black text-2xl font-semibold text-black">EC</div>
                            <img class="absolute bottom-0 left-1/2 transform -translate-x-1/2 xl:h-52 object-contain xl:object-cover" src="suncealand-assets/images/portait-without-background1.png" alt="">
                          </div>
                          <div class="px-8 pt-6 pb-8 bg-white rounded-b-xl">
                            <h4 class="text-2xl font-medium">Emily Chen</h4>
                            <span>UX Researcher</span>
                          </div>
                        </div>
                      </div>
                    </div>
                </div>
                <div x-ref="slide3" class="flex-shrink-0 w-full p-5">
                    <div class="flex flex-wrap justify-between -mx-4 2xl:-mx-10">
                      <div class="w-full lg:w-1/3 px-4 2xl:px-10 mb-16 xl:mb-0">
                        <div class="max-w-xs mx-auto">
                          <div class="relative h-44 bg-yellow-500 rounded-t-xl">
                            <div class="absolute z-10 bottom-0 left-0 ml-8 mb-3 flex items-center justify-center w-15 h-15 bg-white rounded-full border-3 border-black text-2xl font-semibold text-black">AR</div>
                            <img class="absolute bottom-0 left-1/2 transform -translate-x-1/2 xl:h-52 object-contain xl:object-cover" src="suncealand-assets/images/portait-without-background3.png" alt="">
                          </div>
                          <div class="px-8 pt-6 pb-8 bg-white rounded-b-xl">
                            <h4 class="text-2xl font-medium">Alex Reynolds</h4>
                            <span>Product Manager</span>
                          </div>
                        </div>
                      </div>
                      <div class="w-full lg:w-1/3 px-4 2xl:px-10 sm:pt-6 mb-16 xl:mb-0">
                        <div class="sm:animate-bouncingSlow max-w-xs mx-auto">
                          <div class="relative h-44 bg-blue-500 rounded-t-xl">
                            <div class="absolute z-10 bottom-0 left-0 ml-8 mb-3 flex items-center justify-center w-15 h-15 bg-white rounded-full border-3 border-black text-2xl font-semibold text-black">SP</div>
                            <img class="absolute bottom-0 left-1/2 transform -translate-x-1/2 xl:h-52 object-contain xl:object-cover" src="suncealand-assets/images/portait-without-background2.png" alt="">
                          </div>
                          <div class="px-8 pt-6 pb-8 bg-white rounded-b-xl">
                            <h4 class="text-2xl font-medium">Sarah Patel</h4>
                            <span>UI/UX Designer</span>
                          </div>
                        </div>
                      </div>
                      <div class="w-full lg:w-1/3 px-4 2xl:px-10">
                        <div class="max-w-xs mx-auto">
                          <div class="relative h-44 bg-indigo-500 rounded-t-xl">
                            <div class="absolute z-10 bottom-0 left-0 ml-8 mb-3 flex items-center justify-center w-15 h-15 bg-white rounded-full border-3 border-black text-2xl font-semibold text-black">RJ</div>
                            <img class="absolute bottom-0 left-1/2 transform -translate-x-1/2 xl:h-52 object-contain xl:object-cover" src="suncealand-assets/images/portait-without-background1.png" alt="">
                          </div>
                          <div class="px-8 pt-6 pb-8 bg-white rounded-b-xl">
                            <h4 class="text-2xl font-medium">Ryan Johnson</h4>
                            <span>Graphic Designer</span>
                          </div>
                        </div>
                      </div>
                    </div>
                </div>
            </div>
        </div>
      </div>
      <button x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="hidden lg:inline-block absolute top-0 right-0 mt-14 p-1">
        <svg width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M2.00094 0L0.585938 1.415L6.17094 7L7.25098 8L6.17094 9L0.585938 14.585L2.00094 16L10.0009 8L2.00094 0Z" fill="#04082F"></path>
        </svg>
      </button>
      <div class="text-center lg:hidden mt-16">
        <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="inline-block p-1 mr-4">
          <svg width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.99906 16L9.41406 14.585L3.82906 9L2.74902 8L3.82906 7L9.41406 1.415L7.99906 8.29971e-07L-0.000937445 8L7.99906 16Z" fill="#04082F"></path>
          </svg>
        </button>
        <button x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="inline-block p-1">
          <svg width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M2.00094 0L0.585938 1.415L6.17094 7L7.25098 8L6.17094 9L0.585938 14.585L2.00094 16L10.0009 8L2.00094 0Z" fill="#04082F"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
</section>

Show team members in an attractive and interesting way. Our UI libraries contain many variations of Tailwind teams components. Showing the entire team or its key figures builds credibility and attests to the professionalism of the company. It is easier to trust a specific person than a little-known and impersonal organization.

In this mode, you will see versions of the Tailwind teams components that are available within our UI libraries. You will also find many other types of components that will be in the same theme. Our UI libraries are prepared by experienced designers and the code underneath them is created by an in-house team of developers.

Get access to all Tailwind teams components, code and our editor. Try the demo for free.

Try for Free →

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Tailwind CSS Team Components

Framework

UI Library

Components

Team from NEUB

Team Member Card Grid with Bold Pink Header

Team from Casper

Dark Hero Section with Team Member Card Grid

Team from Mirga

Team Section with Member Card Carousel

Your next website starts here

Team from Flow

Meet our experts team carousel with photo cards

Team from Vista

Team member card grid with headshots and social links

Team from Cyber

Digital Operatives Matrix Team Card Grid

Team from FilyTreck

Team member card grid with headshots and social links

Team from Aurora

Meet our team grid with six member cards

Team from asitrastudio

Meet the Team Grid with Circular Avatars

Team from Consulty

Team Intro Hero with Staggered Portrait Gallery

Team from Suncealand

Team Member Card Carousel with Serif Heading

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support