Tailwind CSS Team Sections Blocks

All Blocks
Marketing
Team Sections

Team Sections

Tailwind CSS team directories, profile grids, leadership cards, and team sections with avatars, roles, bios, and social links.

Team Directory Table with Actions Pro

Rows combine avatars, role labels, contact fields, and trailing actions in one full-width table.

<p>
                            <a class="font-mono text-sm text-primary underline underline-offset-2 hover:decoration-2 focus:outline-hidden focus:decoration-2" href="#">
                              We're hiring
                            </a>
                          </p>
                        </div>
                      </div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-5 md:gap-10">
                        
                        <div class="w-full flex items-center gap-x-3">
                          <img class="shrink-0 size-9 rounded-full" src="https://images.unsplash.com/photo-1720048171256-38c59a19fd37?q=80&w=160&h=160&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Avatar">
                          <div class="grow">
                            <div class="flex flex-col sm:flex-row sm:items-center sm:gap-x-3">
                              <div class="grow flex items-center text-sm text-foreground after:flex-1 after:border-t after:border-dashed after:border-line-2 after:mx-2">
                                <span class="font-medium whitespace-nowrap text-sm text-foreground">
                                  James Fisher
                                </span>
                              </div>
                              <div>
                                <span class="font-mono whitespace-nowrap text-sm text-foreground">
                                  Founder
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>

<div class="w-full flex items-center gap-x-3">
                          <img class="shrink-0 size-9 rounded-full" src="https://images.unsplash.com/photo-1720048169575-b179e1a20dc2?q=80&w=160&h=160&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Avatar">
                          <div class="grow">
                            <div class="flex flex-col sm:flex-row sm:items-center sm:gap-x-3">
                              <div class="grow flex items-center text-sm text-foreground after:flex-1 after:border-t after:border-dashed after:border-line-2 after:mx-2">
                                <span class="font-medium whitespace-nowrap text-sm text-foreground">
                                  Niki Kray
                                </span>
                              </div>
                              <div>
                                <span class="font-mono whitespace-nowrap text-sm text-foreground">
                                  Staff Product Manager
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>

<div class="w-full flex items-center gap-x-3">
                          <img class="shrink-0 size-9 rounded-full" src="https://images.unsplash.com/photo-1719937206140-c4b208c78aa7?q=80&w=160&h=160&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Avatar">
                          <div class="grow">
                            <div class="flex flex-col sm:flex-row sm:items-center sm:gap-x-3">
                              <div class="grow flex items-center text-sm text-foreground after:flex-1 after:border-t after:border-dashed after:border-line-2 after:mx-2">
                                <span class="font-medium whitespace-nowrap text-sm text-foreground">
                                  Brian Williams
                                </span>
                              </div>
                              <div>
                                <span class="font-mono whitespace-nowrap text-sm text-foreground">
                                  Co-founder
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>

<div class="w-full flex items-center gap-x-3">
                          <img class="shrink-0 size-9 rounded-full" src="https://images.unsplash.com/photo-1721333087252-e4cffc249d2d?q=80&w=160&h=160&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Avatar">
                          <div class="grow">
                            <div class="flex flex-col sm:flex-row sm:items-center sm:gap-x-3">
                              <div class="grow flex items-center text-sm text-foreground after:flex-1 after:border-t after:border-dashed after:border-line-2 after:mx-2">
                                <span class="font-medium whitespace-nowrap text-sm text-foreground">
                                  Thomas Moor
                                </span>
                              </div>
                              <div>
                                <span class="font-mono whitespace-nowrap text-sm text-foreground">
                                  Project Manager
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>

<div class="w-full flex items-center gap-x-3">
                          <img class="shrink-0 size-9 rounded-full" src="https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=160&h=160&q=80" alt="Avatar">
                          <div class="grow">
                            <div class="flex flex-col sm:flex-row sm:items-center sm:gap-x-3">
                              <div class="grow flex items-center text-sm text-foreground after:flex-1 after:border-t after:border-dashed after:border-line-2 after:mx-2">
                                <span class="font-medium whitespace-nowrap text-sm text-foreground">
                                  Amanda Harvey
                                </span>
                              </div>
                              <div>
                                <span class="font-mono whitespace-nowrap text-sm text-foreground">
                                  HR
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>

<div class="w-full flex items-center gap-x-3">
                          <img class="shrink-0 size-9 rounded-full" src="https://images.unsplash.com/photo-1601935111741-ae98b2b230b0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=160&h=160&q=80" alt="Avatar">
                          <div class="grow">
                            <div class="flex flex-col sm:flex-row sm:items-center sm:gap-x-3">
                              <div class="grow flex items-center text-sm text-foreground after:flex-1 after:border-t after:border-dashed after:border-line-2 after:mx-2">
                                <span class="font-medium whitespace-nowrap text-sm text-foreground">
                                  Costa Quinn
                                </span>
                              </div>
                              <div>
                                <span class="font-mono whitespace-nowrap text-sm text-foreground">
                                  Front-End Developer
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>

<div class="w-full flex items-center gap-x-3">
                          <img class="shrink-0 size-9 rounded-full" src="https://images.unsplash.com/photo-1570654639102-bdd95efeca7a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=160&h=160&q=80" alt="Avatar">
                          <div class="grow">
                            <div class="flex flex-col sm:flex-row sm:items-center sm:gap-x-3">
                              <div class="grow flex items-center text-sm text-foreground after:flex-1 after:border-t after:border-dashed after:border-line-2 after:mx-2">
                                <span class="font-medium whitespace-nowrap text-sm text-foreground">
                                  Anna Richard
                                </span>
                              </div>
                              <div>
                                <span class="font-mono whitespace-nowrap text-sm text-foreground">
                                  Director
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>

<div class="w-full flex items-center gap-x-3">
                          <img class="shrink-0 size-9 rounded-full" src="https://images.unsplash.com/photo-1659482634023-2c4fda99ac0c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=160&h=160&q=80" alt="Avatar">
                          <div class="grow">
                            <div class="flex flex-col sm:flex-row sm:items-center sm:gap-x-3">
                              <div class="grow flex items-center text-sm text-foreground after:flex-1 after:border-t after:border-dashed after:border-line-2 after:mx-2">
                                <span class="font-medium whitespace-nowrap text-sm text-foreground">
                                  Ella Lauda
                                </span>
                              </div>
                              <div>
                                <span class="font-mono whitespace-nowrap text-sm text-foreground">
                                  Designer
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>

<div class="w-full flex items-center gap-x-3">
                          <img class="shrink-0 size-9 rounded-full" src="https://images.unsplash.com/photo-1679412330254-90cb240038c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=160&h=160&q=80" alt="Avatar">
                          <div class="grow">
                            <div class="flex flex-col sm:flex-row sm:items-center sm:gap-x-3">
                              <div class="grow flex items-center text-sm text-foreground after:flex-1 after:border-t after:border-dashed after:border-line-2 after:mx-2">
                                <span class="font-medium whitespace-nowrap text-sm text-foreground">
                                  Lewis Clarke
                                </span>
                              </div>
                              <div>
                                <span class="font-mono whitespace-nowrap text-sm text-foreground">
                                  Designer
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>

<div class="w-full flex items-center gap-x-3">
                          <img class="shrink-0 size-9 rounded-full" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=160&h=160&q=80" alt="Avatar">
                          <div class="grow">
                            <div class="flex flex-col sm:flex-row sm:items-center sm:gap-x-3">
                              <div class="grow flex items-center text-sm text-foreground after:flex-1 after:border-t after:border-dashed after:border-line-2 after:mx-2">
                                <span class="font-medium whitespace-nowrap text-sm text-foreground">
                                  David Harrison
                                </span>
                              </div>
                              <div>
                                <span class="font-mono whitespace-nowrap text-sm text-foreground">
                                  Back-End Developer
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                        
                      </div>
                      
                    </div>

Open SaaS Startup about page

Small profile blocks sit side by side, each with one portrait, a short text stack, and social icons.

<div class="max-w-340 px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
  
  <div class="max-w-2xl mx-auto text-center mb-10 lg:mb-14">
    <h2 class="text-2xl font-bold md:text-4xl md:leading-tight text-foreground">Meet the crew</h2>
    <p class="mt-1 text-muted-foreground-2">Creative people</p>
  </div>

<div class="grid grid-cols-2 lg:grid-cols-3 gap-8 md:gap-12">
    <div class="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4">
      <img class="rounded-lg size-20" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar">
      
      <div class="grow">
        <div>
          <h3 class="font-medium text-foreground">
            David Forren
          </h3>
          <p class="mt-1 text-xs uppercase text-muted-foreground-1">
            Founder / CEO
          </p>
        </div>
        
        
        <div class="mt-2 sm:mt-auto space-x-2.5">
          <a class="inline-flex justify-center items-center text-muted-foreground-1 rounded-full hover:text-foreground focus:outline-hidden focus:text-foreground" href="#">
            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/>
            </svg>
          </a>
          <a class="inline-flex justify-center items-center text-muted-foreground-1 rounded-full hover:text-foreground focus:outline-hidden focus:text-foreground" href="#">
            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
            </svg>
          </a>
          <a class="inline-flex justify-center items-center text-muted-foreground-1 rounded-full hover:text-foreground focus:outline-hidden focus:text-foreground" href="#">
            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M3.362 10.11c0 .926-.756 1.681-1.681 1.681S0 11.036 0 10.111C0 9.186.756 8.43 1.68 8.43h1.682v1.68zm.846 0c0-.924.756-1.68 1.681-1.68s1.681.756 1.681 1.68v4.21c0 .924-.756 1.68-1.68 1.68a1.685 1.685 0 0 1-1.682-1.68v-4.21zM5.89 3.362c-.926 0-1.682-.756-1.682-1.681S4.964 0 5.89 0s1.68.756 1.68 1.68v1.682H5.89zm0 .846c.924 0 1.68.756 1.68 1.681S6.814 7.57 5.89 7.57H1.68C.757 7.57 0 6.814 0 5.89c0-.926.756-1.682 1.68-1.682h4.21zm6.749 1.682c0-.926.755-1.682 1.68-1.682.925 0 1.681.756 1.681 1.681s-.756 1.681-1.68 1.681h-1.681V5.89zm-.848 0c0 .924-.755 1.68-1.68 1.68A1.685 1.685 0 0 1 8.43 5.89V1.68C8.43.757 9.186 0 10.11 0c.926 0 1.681.756 1.681 1.68v4.21zm-1.681 6.748c.926 0 1.682.756 1.682 1.681S11.036 16 10.11 16s-1.681-.756-1.681-1.68v-1.682h1.68zm0-.847c-.924 0-1.68-.755-1.68-1.68 0-.925.756-1.681 1.68-1.681h4.21c.924 0 1.68.756 1.68 1.68 0 .926-.756 1.681-1.68 1.681h-4.21z"/>
            </svg>
          </a>
        </div>
        
      </div>
    </div>

<div class="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4">
      <img class="rounded-lg size-20" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar">
      
      <div class="grow">
        <div>
          <h3 class="font-medium text-foreground">
            Amil Evara
          </h3>
          <p class="mt-1 text-xs uppercase text-muted-foreground-1">
            UI/UX Designer
          </p>
        </div>
        
        
        <div class="mt-2 sm:mt-auto space-x-2.5">
          <a class="inline-flex justify-center items-center text-muted-foreground-1 rounded-full hover:text-foreground focus:outline-hidden focus:text-foreground" href="#">
            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/>
            </svg>
          </a>
          <a class="inline-flex justify-center items-center text-muted-foreground-1 rounded-full hover:text-foreground focus:outline-hidden focus:text-foreground" href="#">
            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
            </svg>
          </a>
          <a class="inline-flex justify-center items-center text-muted-foreground-1 rounded-full hover:text-foreground focus:outline-hidden focus:text-foreground" href="#">
            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M3.362 10.11c0 .926-.756 1.681-1.681 1.681S0 11.036 0 10.111C0 9.186.756 8.43 1.68 8.43h1.682v1.68zm.846 0c0-.924.756-1.68 1.681-1.68s1.681.756 1.681 1.68v4.21c0 .924-.756 1.68-1.68 1.68a1.685 1.685 0 0 1-1.682-1.68v-4.21zM5.89 3.362c-.926 0-1.682-.756-1.682-1.681S4.964 0 5.89 0s1.68.756 1.68 1.68v1.682H5.89zm0 .846c.924 0 1.68.756 1.68 1.681S6.814 7.57 5.89 7.57H1.68C.757 7.57 0 6.814 0 5.89c0-.926.756-1.682 1.68-1.682h4.21zm6.749 1.682c0-.926.755-1.682 1.68-1.682.925 0 1.681.756 1.681 1.681s-.756 1.681-1.68 1.681h-1.681V5.89zm-.848 0c0 .924-.755 1.68-1.68 1.68A1.685 1.685 0 0 1 8.43 5.89V1.68C8.43.757 9.186 0 10.11 0c.926 0 1.681.756 1.681 1.68v4.21zm-1.681 6.748c.926 0 1.682.756 1.682 1.681S11.036 16 10.11 16s-1.681-.756-1.681-1.68v-1.682h1.68zm0-.847c-.924 0-1.68-.755-1.68-1.68 0-.925.756-1.681 1.68-1.681h4.21c.924 0 1.68.756 1.68 1.68 0 .926-.756 1.681-1.68 1.681h-4.21z"/>
            </svg>
          </a>
        </div>
        
      </div>
    </div>

<div class="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4">
      <img class="rounded-lg size-20" src="https://images.unsplash.com/photo-1548142813-c348350df52b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar">
      
      <div class="grow">
        <div>
          <h3 class="font-medium text-foreground">
            Ebele Egbuna
          </h3>
          <p class="mt-1 text-xs uppercase text-muted-foreground-1">
            Support Consultant
          </p>
        </div>
        
        
        <div class="mt-2 sm:mt-auto space-x-2.5">
          <a class="inline-flex justify-center items-center text-muted-foreground-1 rounded-full hover:text-foreground focus:outline-hidden focus:text-foreground" href="#">
            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/>
            </svg>
          </a>
          <a class="inline-flex justify-center items-center text-muted-foreground-1 rounded-full hover:text-foreground focus:outline-hidden focus:text-foreground" href="#">
            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
            </svg>
          </a>
          <a class="inline-flex justify-center items-center text-muted-foreground-1 rounded-full hover:text-foreground focus:outline-hidden focus:text-foreground" href="#">
            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M3.362 10.11c0 .926-.756 1.681-1.681 1.681S0 11.036 0 10.111C0 9.186.756 8.43 1.68 8.43h1.682v1.68zm.846 0c0-.924.756-1.68 1.681-1.68s1.681.756 1.681 1.68v4.21c0 .924-.756 1.68-1.68 1.68a1.685 1.685 0 0 1-1.682-1.68v-4.21zM5.89 3.362c-.926 0-1.682-.756-1.682-1.681S4.964 0 5.89 0s1.68.756 1.68 1.68v1.682H5.89zm0 .846c.924 0 1.68.756 1.68 1.681S6.814 7.57 5.89 7.57H1.68C.757 7.57 0 6.814 0 5.89c0-.926.756-1.682 1.68-1.682h4.21zm6.749 1.682c0-.926.755-1.682 1.68-1.682.925 0 1.681.756 1.681 1.681s-.756 1.681-1.68 1.681h-1.681V5.89zm-.848 0c0 .924-.755 1.68-1.68 1.68A1.685 1.685 0 0 1 8.43 5.89V1.68C8.43.757 9.186 0 10.11 0c.926 0 1.681.756 1.681 1.68v4.21zm-1.681 6.748c.926 0 1.682.756 1.682 1.681S11.036 16 10.11 16s-1.681-.756-1.681-1.68v-1.682h1.68zm0-.847c-.924 0-1.68-.755-1.68-1.68 0-.925.756-1.681 1.68-1.681h4.21c.924 0 1.68.756 1.68 1.68 0 .926-.756 1.681-1.68 1.681h-4.21z"/>
            </svg>
          </a>
        </div>
        
      </div>
    </div>

<div class="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4">
      <img class="rounded-lg size-20" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar">
      
      <div class="grow">
        <div>
          <h3 class="font-medium text-foreground">
            Maria Powers
          </h3>
          <p class="mt-1 text-xs uppercase text-muted-foreground-1">
            Director of sales
          </p>
        </div>
        
        
        <div class="mt-2 sm:mt-auto space-x-2.5">
          <a class="inline-flex justify-center items-center text-muted-foreground-1 rounded-full hover:text-foreground focus:outline-hidden focus:text-foreground" href="#">
            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/>
            </svg>
          </a>
          <a class="inline-flex justify-center items-center text-muted-foreground-1 rounded-full hover:text-foreground focus:outline-hidden focus:text-foreground" href="#">
            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
            </svg>
          </a>
          <a class="inline-flex justify-center items-center text-muted-foreground-1 rounded-full hover:text-foreground focus:outline-hidden focus:text-foreground" href="#">
            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M3.362 10.11c0 .926-.756 1.681-1.681 1.681S0 11.036 0 10.111C0 9.186.756 8.43 1.68 8.43h1.682v1.68zm.846 0c0-.924.756-1.68 1.681-1.68s1.681.756 1.681 1.68v4.21c0 .924-.756 1.68-1.68 1.68a1.685 1.685 0 0 1-1.682-1.68v-4.21zM5.89 3.362c-.926 0-1.682-.756-1.682-1.681S4.964 0 5.89 0s1.68.756 1.68 1.68v1.682H5.89zm0 .846c.924 0 1.68.756 1.68 1.681S6.814 7.57 5.89 7.57H1.68C.757 7.57 0 6.814 0 5.89c0-.926.756-1.682 1.68-1.682h4.21zm6.749 1.682c0-.926.755-1.682 1.68-1.682.925 0 1.681.756 1.681 1.681s-.756 1.681-1.68 1.681h-1.681V5.89zm-.848 0c0 .924-.755 1.68-1.68 1.68A1.685 1.685 0 0 1 8.43 5.89V1.68C8.43.757 9.186 0 10.11 0c.926 0 1.681.756 1.681 1.68v4.21zm-1.681 6.748c.926 0 1.682.756 1.682 1.681S11.036 16 10.11 16s-1.681-.756-1.681-1.68v-1.682h1.68zm0-.847c-.924 0-1.68-.755-1.68-1.68 0-.925.756-1.681 1.68-1.681h4.21c.924 0 1.68.756 1.68 1.68 0 .926-.756 1.681-1.68 1.681h-4.21z"/>
            </svg>
          </a>
        </div>
        
      </div>
    </div>

<div class="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4">
      <img class="rounded-lg size-20" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar">
      
      <div class="grow">
        <div>
          <h3 class="font-medium text-foreground">
            Delia Pawelke
          </h3>
          <p class="mt-1 text-xs uppercase text-muted-foreground-1">
            Front-end Developer
          </p>
        </div>
        
        
        <div class="mt-2 sm:mt-auto space-x-2.5">
          <a class="inline-flex justify-center items-center text-muted-foreground-1 rounded-full hover:text-foreground focus:outline-hidden focus:text-foreground" href="#">
            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/>
            </svg>
          </a>
          <a class="inline-flex justify-center items-center text-muted-foreground-1 rounded-full hover:text-foreground focus:outline-hidden focus:text-foreground" href="#">
            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
            </svg>
          </a>
          <a class="inline-flex justify-center items-center text-muted-foreground-1 rounded-full hover:text-foreground focus:outline-hidden focus:text-foreground" href="#">
            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M3.362 10.11c0 .926-.756 1.681-1.681 1.681S0 11.036 0 10.111C0 9.186.756 8.43 1.68 8.43h1.682v1.68zm.846 0c0-.924.756-1.68 1.681-1.68s1.681.756 1.681 1.68v4.21c0 .924-.756 1.68-1.68 1.68a1.685 1.685 0 0 1-1.682-1.68v-4.21zM5.89 3.362c-.926 0-1.682-.756-1.682-1.681S4.964 0 5.89 0s1.68.756 1.68 1.68v1.682H5.89zm0 .846c.924 0 1.68.756 1.68 1.681S6.814 7.57 5.89 7.57H1.68C.757 7.57 0 6.814 0 5.89c0-.926.756-1.682 1.68-1.682h4.21zm6.749 1.682c0-.926.755-1.682 1.68-1.682.925 0 1.681.756 1.681 1.681s-.756 1.681-1.68 1.681h-1.681V5.89zm-.848 0c0 .924-.755 1.68-1.68 1.68A1.685 1.685 0 0 1 8.43 5.89V1.68C8.43.757 9.186 0 10.11 0c.926 0 1.681.756 1.681 1.68v4.21zm-1.681 6.748c.926 0 1.682.756 1.682 1.681S11.036 16 10.11 16s-1.681-.756-1.681-1.68v-1.682h1.68zm0-.847c-.924 0-1.68-.755-1.68-1.68 0-.925.756-1.681 1.68-1.681h4.21c.924 0 1.68.756 1.68 1.68 0 .926-.756 1.681-1.68 1.681h-4.21z"/>
            </svg>
          </a>
        </div>
        
      </div>
    </div>

<div class="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4">
      <img class="rounded-lg size-20" src="https://images.unsplash.com/photo-1624224971170-2f84fed5eb5e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar">
      
      <div class="grow">
        <div>
          <h3 class="font-medium text-foreground">
            Tom Lowry
          </h3>
          <p class="mt-1 text-xs uppercase text-muted-foreground-1">
            UI/UX Designer
          </p>
        </div>
        
        
        <div class="mt-2 sm:mt-auto space-x-2.5">
          <a class="inline-flex justify-center items-center text-muted-foreground-1 rounded-full hover:text-foreground focus:outline-hidden focus:text-foreground" href="#">
            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/>
            </svg>
          </a>
          <a class="inline-flex justify-center items-center text-muted-foreground-1 rounded-full hover:text-foreground focus:outline-hidden focus:text-foreground" href="#">
            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
            </svg>
          </a>
          <a class="inline-flex justify-center items-center text-muted-foreground-1 rounded-full hover:text-foreground focus:outline-hidden focus:text-foreground" href="#">
            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M3.362 10.11c0 .926-.756 1.681-1.681 1.681S0 11.036 0 10.111C0 9.186.756 8.43 1.68 8.43h1.682v1.68zm.846 0c0-.924.756-1.68 1.681-1.68s1.681.756 1.681 1.68v4.21c0 .924-.756 1.68-1.68 1.68a1.685 1.685 0 0 1-1.682-1.68v-4.21zM5.89 3.362c-.926 0-1.682-.756-1.682-1.681S4.964 0 5.89 0s1.68.756 1.68 1.68v1.682H5.89zm0 .846c.924 0 1.68.756 1.68 1.681S6.814 7.57 5.89 7.57H1.68C.757 7.57 0 6.814 0 5.89c0-.926.756-1.682 1.68-1.682h4.21zm6.749 1.682c0-.926.755-1.682 1.68-1.682.925 0 1.681.756 1.681 1.681s-.756 1.681-1.68 1.681h-1.681V5.89zm-.848 0c0 .924-.755 1.68-1.68 1.68A1.685 1.685 0 0 1 8.43 5.89V1.68C8.43.757 9.186 0 10.11 0c.926 0 1.681.756 1.681 1.68v4.21zm-1.681 6.748c.926 0 1.682.756 1.682 1.681S11.036 16 10.11 16s-1.681-.756-1.681-1.68v-1.682h1.68zm0-.847c-.924 0-1.68-.755-1.68-1.68 0-.925.756-1.681 1.68-1.681h4.21c.924 0 1.68.756 1.68 1.68 0 .926-.756 1.681-1.68 1.681h-4.21z"/>
            </svg>
          </a>
        </div>
        
      </div>
    </div>

<div class="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4">
      <img class="rounded-lg size-20" src="https://images.unsplash.com/photo-1579017331263-ef82f0bbc748?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar">
      
      <div class="grow">
        <div>
          <h3 class="font-medium text-foreground">
            Louise Donadieu
          </h3>
          <p class="mt-1 text-xs uppercase text-muted-foreground-1">
            Support Consultant
          </p>
        </div>
        
        
        <div class="mt-2 sm:mt-auto space-x-2.5">
          <a class="inline-flex justify-center items-center text-muted-foreground-1 rounded-full hover:text-foreground focus:outline-hidden focus:text-foreground" href="#">
            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/>
            </svg>
          </a>
          <a class="inline-flex justify-center items-center text-muted-foreground-1 rounded-full hover:text-foreground focus:outline-hidden focus:text-foreground" href="#">
            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
            </svg>
          </a>
          <a class="inline-flex justify-center items-center text-muted-foreground-1 rounded-full hover:text-foreground focus:outline-hidden focus:text-foreground" href="#">
            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M3.362 10.11c0 .926-.756 1.681-1.681 1.681S0 11.036 0 10.111C0 9.186.756 8.43 1.68 8.43h1.682v1.68zm.846 0c0-.924.756-1.68 1.681-1.68s1.681.756 1.681 1.68v4.21c0 .924-.756 1.68-1.68 1.68a1.685 1.685 0 0 1-1.682-1.68v-4.21zM5.89 3.362c-.926 0-1.682-.756-1.682-1.681S4.964 0 5.89 0s1.68.756 1.68 1.68v1.682H5.89zm0 .846c.924 0 1.68.756 1.68 1.681S6.814 7.57 5.89 7.57H1.68C.757 7.57 0 6.814 0 5.89c0-.926.756-1.682 1.68-1.682h4.21zm6.749 1.682c0-.926.755-1.682 1.68-1.682.925 0 1.681.756 1.681 1.681s-.756 1.681-1.68 1.681h-1.681V5.89zm-.848 0c0 .924-.755 1.68-1.68 1.68A1.685 1.685 0 0 1 8.43 5.89V1.68C8.43.757 9.186 0 10.11 0c.926 0 1.681.756 1.681 1.68v4.21zm-1.681 6.748c.926 0 1.682.756 1.682 1.681S11.036 16 10.11 16s-1.681-.756-1.681-1.68v-1.682h1.68zm0-.847c-.924 0-1.68-.755-1.68-1.68 0-.925.756-1.681 1.68-1.681h4.21c.924 0 1.68.756 1.68 1.68 0 .926-.756 1.681-1.68 1.681h-4.21z"/>
            </svg>
          </a>
        </div>
        
      </div>
    </div>

<div class="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4">
      <img class="rounded-lg size-20" src="https://images.unsplash.com/photo-1514222709107-a180c68d72b4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar">
      
      <div class="grow">
        <div>
          <h3 class="font-medium text-foreground">
            Jeff Fisher
          </h3>
          <p class="mt-1 text-xs uppercase text-muted-foreground-1">
            Project Manager
          </p>
        </div>
        
        
        <div class="mt-2 sm:mt-auto space-x-2.5">
          <a class="inline-flex justify-center items-center text-muted-foreground-1 rounded-full hover:text-foreground focus:outline-hidden focus:text-foreground" href="#">
            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/>
            </svg>
          </a>
          <a class="inline-flex justify-center items-center text-muted-foreground-1 rounded-full hover:text-foreground focus:outline-hidden focus:text-foreground" href="#">
            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
            </svg>
          </a>
          <a class="inline-flex justify-center items-center text-muted-foreground-1 rounded-full hover:text-foreground focus:outline-hidden focus:text-foreground" href="#">
            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M3.362 10.11c0 .926-.756 1.681-1.681 1.681S0 11.036 0 10.111C0 9.186.756 8.43 1.68 8.43h1.682v1.68zm.846 0c0-.924.756-1.68 1.681-1.68s1.681.756 1.681 1.68v4.21c0 .924-.756 1.68-1.68 1.68a1.685 1.685 0 0 1-1.682-1.68v-4.21zM5.89 3.362c-.926 0-1.682-.756-1.682-1.681S4.964 0 5.89 0s1.68.756 1.68 1.68v1.682H5.89zm0 .846c.924 0 1.68.756 1.68 1.681S6.814 7.57 5.89 7.57H1.68C.757 7.57 0 6.814 0 5.89c0-.926.756-1.682 1.68-1.682h4.21zm6.749 1.682c0-.926.755-1.682 1.68-1.682.925 0 1.681.756 1.681 1.681s-.756 1.681-1.68 1.681h-1.681V5.89zm-.848 0c0 .924-.755 1.68-1.68 1.68A1.685 1.685 0 0 1 8.43 5.89V1.68C8.43.757 9.186 0 10.11 0c.926 0 1.681.756 1.681 1.68v4.21zm-1.681 6.748c.926 0 1.682.756 1.682 1.681S11.036 16 10.11 16s-1.681-.756-1.681-1.68v-1.682h1.68zm0-.847c-.924 0-1.68-.755-1.68-1.68 0-.925.756-1.681 1.68-1.681h4.21c.924 0 1.68.756 1.68 1.68 0 .926-.756 1.681-1.68 1.681h-4.21z"/>
            </svg>
          </a>
        </div>
        
      </div>
    </div>

<div class="grow">
        <h3 class="font-medium text-foreground">
          We are hiring!
        </h3>
        <a class="text-sm text-primary decoration-2 hover:underline" href="#">
          Check out / Careers
        </a>
      </div>
    </div>
    
  </div>
  
</div>

Square Team Portrait Grid Free

Square image cards repeat in a multi-column grid with short text blocks under each portrait.

<div class="grid grid-cols-2 md:grid-cols-3 gap-8 md:gap-12">
    <div class="text-center">
      <img class="rounded-xl sm:size-48 lg:size-60 mx-auto" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar">
      <div class="mt-2 sm:mt-4">
        <h3 class="text-sm font-medium text-foreground sm:text-base lg:text-lg">
          David Forren
        </h3>
        <p class="text-xs text-muted-foreground-2 sm:text-sm lg:text-base">
          Founder / CEO
        </p>
      </div>
    </div>

<div class="text-center">
      <img class="rounded-xl sm:size-48 lg:size-60 mx-auto" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar">
      <div class="mt-2 sm:mt-4">
        <h3 class="text-sm font-medium text-foreground sm:text-base lg:text-lg">
          Amil Evara
        </h3>
        <p class="text-xs text-muted-foreground-2 sm:text-sm lg:text-base">
          UI/UX Designer
        </p>
      </div>
    </div>

<div class="text-center">
      <img class="rounded-xl sm:size-48 lg:size-60 mx-auto" src="https://images.unsplash.com/photo-1548142813-c348350df52b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar">
      <div class="mt-2 sm:mt-4">
        <h3 class="text-sm font-medium text-foreground sm:text-base lg:text-lg">
          Ebele Egbuna
        </h3>
        <p class="text-xs text-muted-foreground-2 sm:text-sm lg:text-base">
          Support Consultant
        </p>
      </div>
    </div>

<div class="text-center">
      <img class="rounded-xl sm:size-48 lg:size-60 mx-auto" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar">
      <div class="mt-2 sm:mt-4">
        <h3 class="text-sm font-medium text-foreground sm:text-base lg:text-lg">
          Maria Powers
        </h3>
        <p class="text-xs text-muted-foreground-2 sm:text-sm lg:text-base">
          Director of sales
        </p>
      </div>
    </div>

<div class="text-center">
      <img class="rounded-xl sm:size-48 lg:size-60 mx-auto" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar">
      <div class="mt-2 sm:mt-4">
        <h3 class="text-sm font-medium text-foreground sm:text-base lg:text-lg">
          Delia Pawelke
        </h3>
        <p class="text-xs text-muted-foreground-2 sm:text-sm lg:text-base">
          Front-end Developer
        </p>
      </div>
    </div>

<div class="text-center">
      <img class="rounded-xl sm:size-48 lg:size-60 mx-auto" src="https://images.unsplash.com/photo-1624224971170-2f84fed5eb5e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar">
      <div class="mt-2 sm:mt-4">
        <h3 class="text-sm font-medium text-foreground sm:text-base lg:text-lg">
          Tom Lowry
        </h3>
        <p class="text-xs text-muted-foreground-2 sm:text-sm lg:text-base">
          UI/UX Designer
        </p>
      </div>
    </div>

<div class="text-center">
      <img class="rounded-xl sm:size-48 lg:size-60 mx-auto" src="https://images.unsplash.com/photo-1579017331263-ef82f0bbc748?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar">
      <div class="mt-2 sm:mt-4">
        <h3 class="text-sm font-medium text-foreground sm:text-base lg:text-lg">
          Louise Donadieu
        </h3>
        <p class="text-xs text-muted-foreground-2 sm:text-sm lg:text-base">
          Support Consultant
        </p>
      </div>
    </div>

<div class="text-center">
      <img class="rounded-xl sm:size-48 lg:size-60 mx-auto" src="https://images.unsplash.com/photo-1514222709107-a180c68d72b4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar">
      <div class="mt-2 sm:mt-4">
        <h3 class="text-sm font-medium text-foreground sm:text-base lg:text-lg">
          Jeff Fisher
        </h3>
        <p class="text-xs text-muted-foreground-2 sm:text-sm lg:text-base">
          Project Manager
        </p>
      </div>
    </div>

<div class="text-center">
      <img class="rounded-xl sm:size-48 lg:size-60 mx-auto" src="https://images.unsplash.com/photo-1602452920335-6a132309c7c8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar">
      <div class="mt-2 sm:mt-4">
        <h3 class="text-sm font-medium text-foreground sm:text-base lg:text-lg">
          Sophia Harrington
        </h3>
        <p class="text-xs text-muted-foreground-2 sm:text-sm lg:text-base">
          Project Manager
        </p>
      </div>
    </div>
    
  </div>
  
</div>

Circular Team Portrait Grid Free

Circular portraits anchor each profile block, with names and role labels stacked underneath in a simple grid.

<div class="max-w-5xl px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
  
  <div class="max-w-2xl mx-auto text-center mb-10 lg:mb-14">
    <h2 class="text-2xl font-bold md:text-4xl md:leading-tight text-foreground">Our team</h2>
    <p class="mt-1 text-muted-foreground-2">Creative people</p>
  </div>

<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-8 md:gap-12">
    <div class="text-center">
      <img class="rounded-full size-24 mx-auto" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar">
      <div class="mt-2 sm:mt-4">
        <h3 class="font-medium text-foreground">
          David Forren
        </h3>
        <p class="text-sm text-muted-foreground-2">
          Founder / CEO
        </p>
      </div>
    </div>

<div class="text-center">
      <img class="rounded-full size-24 mx-auto" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar">
      <div class="mt-2 sm:mt-4">
        <h3 class="font-medium text-foreground">
          Amil Evara
        </h3>
        <p class="text-sm text-muted-foreground-2">
          UI/UX Designer
        </p>
      </div>
    </div>

<div class="text-center">
      <img class="rounded-full size-24 mx-auto" src="https://images.unsplash.com/photo-1548142813-c348350df52b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar">
      <div class="mt-2 sm:mt-4">
        <h3 class="font-medium text-foreground">
          Ebele Egbuna
        </h3>
        <p class="text-sm text-muted-foreground-2">
          Support Consultant
        </p>
      </div>
    </div>

<div class="text-center">
      <img class="rounded-full size-24 mx-auto" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar">
      <div class="mt-2 sm:mt-4">
        <h3 class="font-medium text-foreground">
          Maria Powers
        </h3>
        <p class="text-sm text-muted-foreground-2">
          Director of sales
        </p>
      </div>
    </div>

<div class="text-center">
      <img class="rounded-full size-24 mx-auto" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar">
      <div class="mt-2 sm:mt-4">
        <h3 class="font-medium text-foreground">
          Delia Pawelke
        </h3>
        <p class="text-sm text-muted-foreground-2">
          Front-end Developer
        </p>
      </div>
    </div>

<div class="text-center">
      <img class="rounded-full size-24 mx-auto" src="https://images.unsplash.com/photo-1624224971170-2f84fed5eb5e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar">
      <div class="mt-2 sm:mt-4">
        <h3 class="font-medium text-foreground">
          Tom Lowry
        </h3>
        <p class="text-sm text-muted-foreground-2">
          UI/UX Designer
        </p>
      </div>
    </div>

<div class="text-center">
      <img class="rounded-full size-24 mx-auto" src="https://images.unsplash.com/photo-1579017331263-ef82f0bbc748?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar">
      <div class="mt-2 sm:mt-4">
        <h3 class="font-medium text-foreground">
          Louise Donadieu
        </h3>
        <p class="text-sm text-muted-foreground-2">
          Support Consultant
        </p>
      </div>
    </div>

<div class="text-center">
      <img class="rounded-full size-24 mx-auto" src="https://images.unsplash.com/photo-1514222709107-a180c68d72b4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar">
      <div class="mt-2 sm:mt-4">
        <h3 class="font-medium text-foreground">
          Jeff Fisher
        </h3>
        <p class="text-sm text-muted-foreground-2">
          Project Manager
        </p>
      </div>
    </div>

<div class="text-center">
      <img class="rounded-full size-24 mx-auto" src="https://images.unsplash.com/photo-1602452920335-6a132309c7c8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar">
      <div class="mt-2 sm:mt-4">
        <h3 class="font-medium text-foreground">
          Sophia Harrington
        </h3>
        <p class="text-sm text-muted-foreground-2">
          Project Manager
        </p>
      </div>
    </div>

<div class="text-center">
      <img class="rounded-full size-24 mx-auto" src="https://images.unsplash.com/photo-1515621061946-eff1c2a352bd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar">
      <div class="mt-2 sm:mt-4">
        <h3 class="font-medium text-foreground">
          Christina Kray
        </h3>
        <p class="text-sm text-muted-foreground-2">
          Support Consultant
        </p>
      </div>
    </div>

<div class="text-center">
      <img class="rounded-full size-24 mx-auto" src="https://images.unsplash.com/photo-1514846226882-28b324ef7f28?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar">
      <div class="mt-2 sm:mt-4">
        <h3 class="font-medium text-foreground">
          Amy Forren
        </h3>
        <p class="text-sm text-muted-foreground-2">
          Product Designer
        </p>
      </div>
    </div>

<div class="text-center">
      <img class="rounded-full size-24 mx-auto" src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar">
      <div class="mt-2 sm:mt-4">
        <h3 class="font-medium text-foreground">
          Philip Williams
        </h3>
        <p class="text-sm text-muted-foreground-2">
          Support Consultant
        </p>
      </div>
    </div>

<div class="text-center">
      <img class="rounded-full size-24 mx-auto" src="https://images.unsplash.com/photo-1520409364224-63400afe26e5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar">
      <div class="mt-2 sm:mt-4">
        <h3 class="font-medium text-foreground">
          Brian Lofoten
        </h3>
        <p class="text-sm text-muted-foreground-2">
          UI/UX Designer
        </p>
      </div>
    </div>

<div class="text-center">
      <img class="rounded-full size-24 mx-auto" src="https://images.unsplash.com/photo-1558507652-2d9626c4e67a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar">
      <div class="mt-2 sm:mt-4">
        <h3 class="font-medium text-foreground">
          Jessica Dorsey
        </h3>
        <p class="text-sm text-muted-foreground-2">
          Director of sales
        </p>
      </div>
    </div>

<div class="text-center">
      <img class="rounded-full size-24 mx-auto" src="https://images.unsplash.com/photo-1521151716396-b2da27b1a19f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar">
      <div class="mt-2 sm:mt-4">
        <h3 class="font-medium text-foreground">
          Nick Jackson
        </h3>
        <p class="text-sm text-muted-foreground-2">
          UI/UX Designer
        </p>
      </div>
    </div>
    
  </div>

<div class="mt-12 flex justify-center">
    <div class="bg-layer border border-layer-line py-2 px-3 rounded-full">
      <div class="flex items-center gap-x-3">
        <span class="text-sm text-muted-foreground-1">Want to work with us?</span>
        <a class="inline-flex items-center gap-x-2 text-sm font-medium text-primary hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="#">
          We are hiring
          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
        </a>
      </div>
    </div>
  </div>
  
</div>

Larger profile cards repeat in a grid, pairing the portrait with a longer text block and a separate row of social links.

<div class="max-w-340 px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
  
  <div class="max-w-2xl mx-auto text-center mb-10 lg:mb-14">
    <h2 class="text-2xl font-bold md:text-4xl md:leading-tight text-foreground">Our leadership</h2>
    <p class="mt-1 text-muted-foreground-2">Creative people</p>
  </div>

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
    <div class="flex flex-col rounded-xl p-4 md:p-6 bg-card border border-card-line">
      <div class="flex items-center gap-x-4">
        <img class="rounded-full size-20" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar">
        <div class="grow">
          <h3 class="font-medium text-foreground">
            David Forren
          </h3>
          <p class="text-xs uppercase text-muted-foreground-1">
            Founder / CEO
          </p>
        </div>
      </div>
      
      <p class="mt-3 text-muted-foreground-1">
        I am an ambitious workaholic, but apart from that, pretty simple person.
      </p>

<div class="mt-3 space-x-1">
        <a class="inline-flex justify-center items-center size-8 text-sm font-semibold rounded-lg bg-layer border border-layer-line text-muted-foreground-1 hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
          <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
            <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/>
          </svg>
        </a>
        <a class="inline-flex justify-center items-center size-8 text-sm font-semibold rounded-lg bg-layer border border-layer-line text-muted-foreground-1 hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
          <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
            <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
          </svg>
        </a>
        <a class="inline-flex justify-center items-center size-8 text-sm font-semibold rounded-lg bg-layer border border-layer-line text-muted-foreground-1 hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
          <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
            <path d="M3.362 10.11c0 .926-.756 1.681-1.681 1.681S0 11.036 0 10.111C0 9.186.756 8.43 1.68 8.43h1.682v1.68zm.846 0c0-.924.756-1.68 1.681-1.68s1.681.756 1.681 1.68v4.21c0 .924-.756 1.68-1.68 1.68a1.685 1.685 0 0 1-1.682-1.68v-4.21zM5.89 3.362c-.926 0-1.682-.756-1.682-1.681S4.964 0 5.89 0s1.68.756 1.68 1.68v1.682H5.89zm0 .846c.924 0 1.68.756 1.68 1.681S6.814 7.57 5.89 7.57H1.68C.757 7.57 0 6.814 0 5.89c0-.926.756-1.682 1.68-1.682h4.21zm6.749 1.682c0-.926.755-1.682 1.68-1.682.925 0 1.681.756 1.681 1.681s-.756 1.681-1.68 1.681h-1.681V5.89zm-.848 0c0 .924-.755 1.68-1.68 1.68A1.685 1.685 0 0 1 8.43 5.89V1.68C8.43.757 9.186 0 10.11 0c.926 0 1.681.756 1.681 1.68v4.21zm-1.681 6.748c.926 0 1.682.756 1.682 1.681S11.036 16 10.11 16s-1.681-.756-1.681-1.68v-1.682h1.68zm0-.847c-.924 0-1.68-.755-1.68-1.68 0-.925.756-1.681 1.68-1.681h4.21c.924 0 1.68.756 1.68 1.68 0 .926-.756 1.681-1.68 1.681h-4.21z"/>
          </svg>
        </a>
      </div>
      
    </div>

<div class="flex flex-col rounded-xl p-4 md:p-6 bg-card border border-card-line">
      <div class="flex items-center gap-x-4">
        <img class="rounded-full size-20" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar">
        <div class="grow">
          <h3 class="font-medium text-foreground">
            Amil Evara
          </h3>
          <p class="text-xs uppercase text-muted-foreground-1">
            UI/UX Designer
          </p>
        </div>
      </div>
      
      <p class="mt-3 text-muted-foreground-1">
        I am an ambitious workaholic, but apart from that, pretty simple person.
      </p>

<div class="flex flex-col rounded-xl p-4 md:p-6 bg-card border border-card-line">
      <div class="flex items-center gap-x-4">
        <img class="rounded-full size-20" src="https://images.unsplash.com/photo-1548142813-c348350df52b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar">
        <div class="grow">
          <h3 class="font-medium text-foreground">
            Ebele Egbuna
          </h3>
          <p class="text-xs uppercase text-muted-foreground-1">
            Support Consultant
          </p>
        </div>
      </div>
      
      <p class="mt-3 text-muted-foreground-1">
        I am an ambitious workaholic, but apart from that, pretty simple person.
      </p>

<div class="flex flex-col rounded-xl p-4 md:p-6 bg-card border border-card-line">
      <div class="flex items-center gap-x-4">
        <img class="rounded-full size-20" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar">
        <div class="grow">
          <h3 class="font-medium text-foreground">
            Maria Powers
          </h3>
          <p class="text-xs uppercase text-muted-foreground-1">
            Director of sales
          </p>
        </div>
      </div>
      
      <p class="mt-3 text-muted-foreground-1">
        I am an ambitious workaholic, but apart from that, pretty simple person.
      </p>

<div class="flex flex-col rounded-xl p-4 md:p-6 bg-card border border-card-line">
      <div class="flex items-center gap-x-4">
        <img class="rounded-full size-20" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar">
        <div class="grow">
          <h3 class="font-medium text-foreground">
            Delia Pawelke
          </h3>
          <p class="text-xs uppercase text-muted-foreground-1">
            Front-end Developer
          </p>
        </div>
      </div>
      
      <p class="mt-3 text-muted-foreground-1">
        I am an ambitious workaholic, but apart from that, pretty simple person.
      </p>

<div class="flex flex-col rounded-xl p-4 md:p-6 bg-card border border-card-line">
      <div class="flex items-center gap-x-4">
        <img class="rounded-full size-20" src="https://images.unsplash.com/photo-1624224971170-2f84fed5eb5e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar">
        <div class="grow">
          <h3 class="font-medium text-foreground">
            Tom Lowry
          </h3>
          <p class="text-xs uppercase text-muted-foreground-1">
            UI/UX Designer
          </p>
        </div>
      </div>
      
      <p class="mt-3 text-muted-foreground-1">
        I am an ambitious workaholic, but apart from that, pretty simple person.
      </p>

<div class="flex flex-col rounded-xl p-4 md:p-6 bg-card border border-card-line">
      <div class="flex items-center gap-x-4">
        <img class="rounded-full size-20" src="https://images.unsplash.com/photo-1579017331263-ef82f0bbc748?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar">
        <div class="grow">
          <h3 class="font-medium text-foreground">
            Louise Donadieu
          </h3>
          <p class="text-xs uppercase text-muted-foreground-1">
            Support Consultant
          </p>
        </div>
      </div>
      
      <p class="mt-3 text-muted-foreground-1">
        I am an ambitious workaholic, but apart from that, pretty simple person.
      </p>

<div class="flex flex-col rounded-xl p-4 md:p-6 bg-card border border-card-line">
      <div class="flex items-center gap-x-4">
        <img class="rounded-full size-20" src="https://images.unsplash.com/photo-1514222709107-a180c68d72b4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar">
        <div class="grow">
          <h3 class="font-medium text-foreground">
            Jeff Fisher
          </h3>
          <p class="text-xs uppercase text-muted-foreground-1">
            Project Manager
          </p>
        </div>
      </div>
      
      <p class="mt-3 text-muted-foreground-1">
        I am an ambitious workaholic, but apart from that, pretty simple person.
      </p>

<a class="col-span-full lg:col-span-1 group flex flex-col justify-center text-center rounded-xl p-4 md:p-6 bg-layer border border-dashed border-layer-line hover:shadow-2xs focus:outline-hidden focus:shadow-2xs" href="#">
      <h3 class="text-lg text-foreground">
        We are hiring!
      </h3>
      <div>
        <span class="inline-flex items-center gap-x-2 text-primary group-hover:text-primary-hover group-focus:text-primary-focus">
          See all opening positions
          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
        </span>
      </div>
    </a>
    
  </div>
  
</div>

Team Sections

Team Directory Table with Actions Pro

Inline Team Profiles with Social Links Free

Square Team Portrait Grid Free

Circular Team Portrait Grid Free

Team Profile Card Grid with Bios and Social Links Free