Team section - Htmlwind

Team section with round images

This tailwind example is contributed by Htmlwind, on 02-Jun-2025. Component is made with Tailwind v3.4. It is responsive.

Team

Author Htmlwind

Tailwind v3.4 786 2

Fork Fullscreen

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

Related Examples

The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Hasan AlDoy (McDoy)

5 months ago

481
Team Section

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.9k
Heading
Subtle Script Background - Large, very light script font in the background ("Amazing") Light-to-Dark Gradient Heading - Main heading fades from light gray to dark gray Layered Typography - Secondary heading in medium weight for contrast Elegant Divider - With centered italic text Minimalist Border Accents - Thin borders in corners for sophistication Responsive Design - Scales beautifully on all devices

KULDEEP

1 year ago

975
Team Members

Abdul Baset Bappy

1 year ago

1.2k
hero modern
hero modern

Omer fils ELENGA

9 months ago

839
Hotel management
dashboard used in hotel management system

Frederick250

1 year ago

3k
Career Page
This is a career page component built in tailwind

Deepak Sharma

1 year ago

1.7k
Team section
responsive project team section

Ron Hicks

3 years ago

11.1k
CYBERNARA
Cybernara is a futuristic design style that blends cyberpunk elements with traditional Japanese aesthetics, creating a unique digital experience. Let me break down the key aspects of this approach

Anonymous

1 year ago

1.5k
canvas fully covers
canvas fully covers

ABDESLAMI ACHRAF

1 year ago

5.1k
Responsive Portfolio Webpage with Tailwind CSS
This is a reusable and responsive portfolio webpage template created with HTML and Tailwind CSS. Designed for developers or creatives, the template includes essential sections like Header, Hero, About, Skills, Experience, Projects, Testimonials, Contact Form, and Footer. It features a clean, modern design and is fully customizable without requiring JavaScript. Perfect for showcasing personal or professional work on the web.

Ayyamperumal S

1 year ago

3.2k
Ai clone, chat ui
Chat interface for ai builder, dont toomuch focused on designing responsive

Abhiraj

1 year ago

3k