Home
Htmlwind
Team section - Htmlwind

Team section - Htmlwind

Team section with round images

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

Team

Author Htmlwind

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

Jobs recommended for you
This HTML page is a responsive, dark-mode-friendly job recommendation interface designed using Tailwind CSS. It displays job listings in a card format, each showing: A colorful header background. A company logo/profile image styled as a rounded thumbnail. A job title (e.g., Senior Product Designer). A company name. A location with an icon. Job type (e.g., Full-time). Time since posting (e.g., 2d ago).

Author:
Code Master(Mfuranziza Dusabe Hamza)

2 months ago

305
Avatar
Avatar

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

4.4k
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.

Author:
Ayyamperumal S

6 months ago

1.4k
team section

Author:
Hale Holman

9 months ago

1.3k
basichtml
this is basic html

Author:
Anonymous

1 month ago

102
Team Showcase

Author:
KULDEEP

2 months ago

192
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Author:
Ameth Galarcio

5 months ago

1.3k
Team section
with team member's social accounts

Author:
Ron Hicks

2 years ago

11.4k
canvas fully covers
canvas fully covers

Author:
Balogun David Olajuwon

2 months ago

525
Our Team section

Author:
Ron Hicks

2 years ago

9.4k
Responsive portfolio with dark mode
responsive and support dark mode .portfolio website

Author:
ABDESLAMI ACHRAF

10 months ago

3k
Meet the team section

Author:
Sienna

2 years ago

12.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components