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

279

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

Our Team section

Author:
Ron Hicks

3 years ago

9.9k
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)

8 months ago

642
Page Not Found
Oops! Page Not Found

Author:
gidy

8 months ago

667
Tailwind flex Hero
Show Image with flex image gallery

Author:
Riaz Uddin Masum

1 month ago

174
Meet the team section

Author:
Sienna

3 years ago

12.7k
Team Section

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

1 year ago

2.4k
Table
Table with image and status with pagination buttons

Author:
Abhiraj

1 year ago

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

Author:
Ameth Galarcio

1 year ago

1.8k
Team section
beautiful responsive our team section

Author:
Rajesh Maheshwari

11 months ago

1.3k
Tailwind Team section

Author:
Leon Bachmann

3 years ago

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

1 year ago

2.3k
basichtml
this is basic html

Author:
Anonymous

7 months ago

478

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components