Tailwind CSS Team & Profile Views Blocks

All Blocks
Application UI
Data Display
Team & Profile Views

Team & Profile Views

Explore profile cards and team views for member directories, workspace profiles, and internal tools.

Team Membership Card List Pro

A stacked card list shows joined teams with member counts, roles, and quick actions.

<div class="space-y-3">
                      
                      <div class="p-4 relative flex flex-col bg-card border border-card-line rounded-xl">
                        <div class="grid lg:grid-cols-12 gap-y-2 lg:gap-y-0 gap-x-4">
                          <div class="lg:col-span-3">
                            <p>
                              <a class="inline-flex items-center gap-x-1 text-foreground decoration-2 hover:underline font-semibold hover:text-primary-hover focus:outline-hidden focus:underline focus:text-primary-focus" href="#">
                                #Digitalmarketing
                              </a>
                            </p>
      
                            
                            <div class="mt-1 lg:mt-2 flex flex-wrap gap-1.5">
                              <span class="m-0.5 p-1.5 sm:p-2 inline-block bg-surface text-surface-foreground text-xs rounded-md">Marketing</span>
                              <span class="m-0.5 p-1.5 sm:p-2 inline-block bg-surface text-surface-foreground text-xs rounded-md">Digital</span>
                            </div>
                            
                          </div>

<div class="lg:col-span-6">
                            <p class="mt-1 text-sm text-muted-foreground-1">
                              Our group promotes and sells products and services by leveraging online marketing tactics
                            </p>

<div class="mt-2 flex items-center gap-x-3">
                              <p class="text-xs uppercase text-muted-foreground-1">
                                Members:
                              </p>
                              <div class="flex items-center -space-x-2">
                                <img class="shrink-0 size-7 bg-layer border border-layer-line rounded-full" src="https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
                                <span class="flex shrink-0 justify-center items-center size-7 bg-layer border border-layer-line text-layer-foreground text-xs font-medium uppercase rounded-full">L</span>
                                <img class="shrink-0 size-7 bg-layer border border-layer-line 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=320&h=320&q=80" alt="Avatar">
                                <img class="shrink-0 size-7 bg-layer border border-layer-line 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=320&h=320&q=80" alt="Avatar">
                                <span class="flex shrink-0 justify-center items-center size-7 bg-layer border border-layer-line text-layer-foreground text-xs font-medium uppercase rounded-full">O</span>
                              </div>
                            </div>
                            
                          </div>

<div class="lg:col-span-3">
                            
                            <div class="flex lg:flex-col justify-end items-center gap-2 border-t border-card-divider lg:border-t-0 pt-3 lg:pt-0">
                              <div class="lg:order-2 lg:ms-auto">
                                <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" data-hs-overlay="#hs-pro-chhdl">
                                  Leave team
                                </button>
                              </div>

<div class="lg:order-1 lg:ms-auto">
                                
                                <div class="hs-dropdown [--placement:bottom-right] relative inline-flex">
                                  <button id="hs-pro-dupc1" type="button" class="size-9.5 lg:size-7 inline-flex justify-center items-center gap-x-2 rounded-lg border border-transparent text-muted-foreground-1 hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                    <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"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
                                  </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dupc1">
                                    <div class="p-1">
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" data-hs-overlay="#hs-pro-detm">
                                        <svg class="shrink-0 size-3.5" 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="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
                                        Edit team
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <svg class="shrink-0 size-3.5" 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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                                        Add to favorites
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <svg class="shrink-0 size-3.5" 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"><rect width="20" height="5" x="2" y="4" rx="2"/><path d="M4 9v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9"/><path d="M10 13h4"/></svg>
                                        Archive team
                                      </button>

<div class="p-4 relative flex flex-col bg-card border border-card-line rounded-xl">
                        <div class="grid lg:grid-cols-12 gap-y-2 lg:gap-y-0 gap-x-4">
                          <div class="lg:col-span-3">
                            <p>
                              <a class="inline-flex items-center gap-x-1 text-foreground decoration-2 hover:underline font-semibold hover:text-primary-hover focus:outline-hidden focus:underline focus:text-primary-focus" href="#">
                                #supportteam
                              </a>
                            </p>
      
                            
                            <div class="mt-1 lg:mt-2 flex flex-wrap gap-1.5">
                              <span class="m-0.5 p-1.5 sm:p-2 inline-block bg-surface text-surface-foreground text-xs rounded-md">Customer service</span>
                              <span class="m-0.5 p-1.5 sm:p-2 inline-block bg-surface text-surface-foreground text-xs rounded-md">Support</span>
                            </div>
                            
                          </div>

<div class="lg:col-span-6">
                            <p class="mt-1 text-sm text-muted-foreground-1">
                              Keep in touch and stay productive with us
                            </p>

<div class="lg:col-span-3">
                            
                            <div class="flex lg:flex-col justify-end items-center gap-2 border-t border-card-divider lg:border-t-0 pt-3 lg:pt-0">
                              <div class="lg:order-2 lg:ms-auto">
                                <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" data-hs-overlay="#hs-pro-chhdl">
                                  <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"><polyline points="20 6 9 17 4 12"/></svg>Request sent
                                </button>
                              </div>

<div class="lg:order-1 lg:ms-auto">
                                
                                <div class="hs-dropdown [--placement:bottom-right] relative inline-flex">
                                  <button id="hs-pro-dupc2" type="button" class="size-9.5 lg:size-7 inline-flex justify-center items-center gap-x-2 rounded-lg border border-transparent text-muted-foreground-1 hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                    <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"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
                                  </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dupc2">
                                    <div class="p-1">
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" data-hs-overlay="#hs-pro-detm">
                                        <svg class="shrink-0 size-3.5" 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="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
                                        Edit team
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <svg class="shrink-0 size-3.5" 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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                                        Add to favorites
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <svg class="shrink-0 size-3.5" 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"><rect width="20" height="5" x="2" y="4" rx="2"/><path d="M4 9v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9"/><path d="M10 13h4"/></svg>
                                        Archive team
                                      </button>

<div class="p-4 relative flex flex-col bg-card border border-card-line rounded-xl">
                        <div class="grid lg:grid-cols-12 gap-y-2 lg:gap-y-0 gap-x-4">
                          <div class="lg:col-span-3">
                            <p>
                              <a class="inline-flex items-center gap-x-1 text-foreground decoration-2 hover:underline font-semibold hover:text-primary-hover focus:outline-hidden focus:underline focus:text-primary-focus" href="#">
                                #Events
                              </a>
                            </p>
      
                            
                            <div class="mt-1 lg:mt-2 flex flex-wrap gap-1.5">
                              <span class="m-0.5 p-1.5 sm:p-2 inline-block bg-surface text-surface-foreground text-xs rounded-md">Organizers</span>
                              
                            </div>
                            
                          </div>

<div class="lg:col-span-6">
                            <p class="mt-1 text-sm text-muted-foreground-1">
                              Because we love to know what's going on & share great ideas
                            </p>

<div class="mt-2 flex items-center gap-x-3">
                              <p class="text-xs uppercase text-muted-foreground-1">
                                Members:
                              </p>
                              <div class="flex items-center -space-x-2">
                                <span class="flex shrink-0 justify-center items-center size-7 bg-layer border border-layer-line text-layer-foreground text-xs font-medium uppercase rounded-full">L</span>
                                <span class="flex shrink-0 justify-center items-center size-7 bg-layer border border-layer-line text-layer-foreground text-xs font-medium uppercase rounded-full">O</span>
                              </div>
                            </div>
                            
                          </div>

<div class="lg:order-1 lg:ms-auto">
                                
                                <div class="hs-dropdown [--placement:bottom-right] relative inline-flex">
                                  <button id="hs-pro-dupc3" type="button" class="size-9.5 lg:size-7 inline-flex justify-center items-center gap-x-2 rounded-lg border border-transparent text-muted-foreground-1 hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                    <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"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
                                  </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dupc3">
                                    <div class="p-1">
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" data-hs-overlay="#hs-pro-detm">
                                        <svg class="shrink-0 size-3.5" 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="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
                                        Edit team
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <svg class="shrink-0 size-3.5" 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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                                        Add to favorites
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <svg class="shrink-0 size-3.5" 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"><rect width="20" height="5" x="2" y="4" rx="2"/><path d="M4 9v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9"/><path d="M10 13h4"/></svg>
                                        Archive team
                                      </button>

<div class="p-4 relative flex flex-col bg-card border border-card-line rounded-xl">
                        <div class="grid lg:grid-cols-12 gap-y-2 lg:gap-y-0 gap-x-4">
                          <div class="lg:col-span-3">
                            <p>
                              <a class="inline-flex items-center gap-x-1 text-foreground decoration-2 hover:underline font-semibold hover:text-primary-hover focus:outline-hidden focus:underline focus:text-primary-focus" href="#">
                                #ethereum
                              </a>
                            </p>
      
                            
                            <div class="mt-1 lg:mt-2 flex flex-wrap gap-1.5">
                              <span class="m-0.5 p-1.5 sm:p-2 inline-block bg-surface text-surface-foreground text-xs rounded-md">Ethereum</span>
                              <span class="m-0.5 p-1.5 sm:p-2 inline-block bg-surface text-surface-foreground text-xs rounded-md">Cryptocurrency</span>
                            </div>
                            
                          </div>

<div class="lg:col-span-6">
                            <p class="mt-1 text-sm text-muted-foreground-1">
                              Focusing on innovative and disruptive business models
                            </p>

<div class="mt-2 flex items-center gap-x-3">
                              <p class="text-xs uppercase text-muted-foreground-1">
                                Members:
                              </p>
                              <div class="flex items-center -space-x-2">
                                <span class="flex shrink-0 justify-center items-center size-7 bg-layer border border-layer-line text-layer-foreground text-xs font-medium uppercase rounded-full">U</span>
                                <span class="flex shrink-0 justify-center items-center size-7 bg-layer border border-layer-line text-layer-foreground text-xs font-medium uppercase rounded-full">L</span>
                                <span class="flex shrink-0 justify-center items-center size-7 bg-layer border border-layer-line text-layer-foreground text-xs font-medium uppercase rounded-full">G</span>
                                <span class="flex shrink-0 justify-center items-center size-7 bg-layer border border-layer-line text-layer-foreground text-xs font-medium uppercase rounded-full">K</span>
                                <span class="flex shrink-0 justify-center items-center size-7 bg-layer border border-layer-line text-layer-foreground text-xs font-medium uppercase rounded-full">O</span>
                              </div>
                            </div>
                            
                          </div>

<div class="lg:order-1 lg:ms-auto">
                                
                                <div class="hs-dropdown [--placement:bottom-right] relative inline-flex">
                                  <button id="hs-pro-dupc4" type="button" class="size-9.5 lg:size-7 inline-flex justify-center items-center gap-x-2 rounded-lg border border-transparent text-muted-foreground-1 hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                    <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"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
                                  </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dupc4">
                                    <div class="p-1">
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" data-hs-overlay="#hs-pro-detm">
                                        <svg class="shrink-0 size-3.5" 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="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
                                        Edit team
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <svg class="shrink-0 size-3.5" 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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                                        Add to favorites
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <svg class="shrink-0 size-3.5" 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"><rect width="20" height="5" x="2" y="4" rx="2"/><path d="M4 9v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9"/><path d="M10 13h4"/></svg>
                                        Archive team
                                      </button>

<div class="p-4 relative flex flex-col bg-card border border-card-line rounded-xl">
                        <div class="grid lg:grid-cols-12 gap-y-2 lg:gap-y-0 gap-x-4">
                          <div class="lg:col-span-3">
                            <p>
                              <a class="inline-flex items-center gap-x-1 text-foreground decoration-2 hover:underline font-semibold hover:text-primary-hover focus:outline-hidden focus:underline focus:text-primary-focus" href="#">
                                #payments
                              </a>
                            </p>
      
                            
                            <div class="mt-1 lg:mt-2 flex flex-wrap gap-1.5">
                              <span class="m-0.5 p-1.5 sm:p-2 inline-block bg-surface text-surface-foreground text-xs rounded-md">Payment</span>
                              <span class="m-0.5 p-1.5 sm:p-2 inline-block bg-surface text-surface-foreground text-xs rounded-md">Finance</span>
                            </div>
                            
                          </div>

<div class="lg:col-span-6">
                            <p class="mt-1 text-sm text-muted-foreground-1">
                              Our responsibility to manage the money in this organization
                            </p>

<div class="lg:order-1 lg:ms-auto">
                                
                                <div class="hs-dropdown [--placement:bottom-right] relative inline-flex">
                                  <button id="hs-pro-dupc5" type="button" class="size-9.5 lg:size-7 inline-flex justify-center items-center gap-x-2 rounded-lg border border-transparent text-muted-foreground-1 hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                    <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"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
                                  </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dupc5">
                                    <div class="p-1">
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" data-hs-overlay="#hs-pro-detm">
                                        <svg class="shrink-0 size-3.5" 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="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
                                        Edit team
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <svg class="shrink-0 size-3.5" 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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                                        Add to favorites
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <svg class="shrink-0 size-3.5" 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"><rect width="20" height="5" x="2" y="4" rx="2"/><path d="M4 9v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9"/><path d="M10 13h4"/></svg>
                                        Archive team
                                      </button>

<div class="p-4 relative flex flex-col bg-card border border-card-line rounded-xl">
                        <div class="grid lg:grid-cols-12 gap-y-2 lg:gap-y-0 gap-x-4">
                          <div class="lg:col-span-3">
                            <p>
                              <a class="inline-flex items-center gap-x-1 text-foreground decoration-2 hover:underline font-semibold hover:text-primary-hover focus:outline-hidden focus:underline focus:text-primary-focus" href="#">
                                #Invoices
                              </a>
                            </p>
      
                            
                            <div class="mt-1 lg:mt-2 flex flex-wrap gap-1.5">
                              <span class="m-0.5 p-1.5 sm:p-2 inline-block bg-surface text-surface-foreground text-xs rounded-md">Payment</span>
                              <span class="m-0.5 p-1.5 sm:p-2 inline-block bg-surface text-surface-foreground text-xs rounded-md">Finance</span>
                            </div>
                            
                          </div>

<div class="lg:col-span-6">
                            <p class="mt-1 text-sm text-muted-foreground-1">
                              This group serves online money transfers as an electronic alternative to paper methods
                            </p>

<div class="mt-2 flex items-center gap-x-3">
                              <p class="text-xs uppercase text-muted-foreground-1">
                                Members:
                              </p>
                              <div class="flex items-center -space-x-2">
                                <img class="shrink-0 size-7 bg-layer border border-layer-line rounded-full" src="https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
                                <span class="flex shrink-0 justify-center items-center size-7 bg-layer border border-layer-line text-layer-foreground text-xs font-medium uppercase rounded-full">L</span>
                                <img class="shrink-0 size-7 bg-layer border border-layer-line 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=320&h=320&q=80" alt="Avatar">
                                <span class="flex shrink-0 justify-center items-center size-7 bg-layer border border-layer-line text-layer-foreground text-xs font-medium uppercase rounded-full">W</span>
                              </div>
                            </div>
                            
                          </div>

<div class="lg:order-1 lg:ms-auto">
                                
                                <div class="hs-dropdown [--placement:bottom-right] relative inline-flex">
                                  <button id="hs-pro-dupc6" type="button" class="size-9.5 lg:size-7 inline-flex justify-center items-center gap-x-2 rounded-lg border border-transparent text-muted-foreground-1 hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                    <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"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
                                  </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dupc6">
                                    <div class="p-1">
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" data-hs-overlay="#hs-pro-detm">
                                        <svg class="shrink-0 size-3.5" 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="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
                                        Edit team
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <svg class="shrink-0 size-3.5" 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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                                        Add to favorites
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <svg class="shrink-0 size-3.5" 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"><rect width="20" height="5" x="2" y="4" rx="2"/><path d="M4 9v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9"/><path d="M10 13h4"/></svg>
                                        Archive team
                                      </button>

<div class="p-4 relative flex flex-col bg-card border border-card-line rounded-xl">
                        <div class="grid lg:grid-cols-12 gap-y-2 lg:gap-y-0 gap-x-4">
                          <div class="lg:col-span-3">
                            <p>
                              <a class="inline-flex items-center gap-x-1 text-foreground decoration-2 hover:underline font-semibold hover:text-primary-hover focus:outline-hidden focus:underline focus:text-primary-focus" href="#">
                                #Subscription
                              </a>
                            </p>
      
                            
                            <div class="mt-1 lg:mt-2 flex flex-wrap gap-1.5">
                              <span class="m-0.5 p-1.5 sm:p-2 inline-block bg-surface text-surface-foreground text-xs rounded-md">Mailchimp</span>
                              <span class="m-0.5 p-1.5 sm:p-2 inline-block bg-surface text-surface-foreground text-xs rounded-md">Subscription</span>
                            </div>
                            
                          </div>

<div class="lg:col-span-6">
                            <p class="mt-1 text-sm text-muted-foreground-1">
                              The all-in-one Marketing Platform built for growing businesses.
                            </p>

<div class="mt-2 flex items-center gap-x-3">
                              <p class="text-xs uppercase text-muted-foreground-1">
                                Members:
                              </p>
                              <div class="flex items-center -space-x-2">
                                <img class="shrink-0 size-7 bg-layer border border-layer-line 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=320&h=320&q=80" alt="Avatar">
                                <img class="shrink-0 size-7 bg-layer border border-layer-line 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=320&h=320&q=80" alt="Avatar">
                                <span class="flex shrink-0 justify-center items-center size-7 bg-layer border border-layer-line text-layer-foreground text-xs font-medium uppercase rounded-full">O</span>
                              </div>
                            </div>
                            
                          </div>

<div class="lg:col-span-3">
                            
                            <div class="flex lg:flex-col justify-end items-center gap-2 border-t border-card-divider lg:border-t-0 pt-3 lg:pt-0">
                              <div class="lg:order-2 lg:ms-auto">
                                <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" data-hs-overlay="#hs-pro-chhdl">
                                  <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"><polyline points="20 6 9 17 4 12"/></svg>Request sent
                                </button>
                              </div>

<div class="lg:order-1 lg:ms-auto">
                                
                                <div class="hs-dropdown [--placement:bottom-right] relative inline-flex">
                                  <button id="hs-pro-dupc7" type="button" class="size-9.5 lg:size-7 inline-flex justify-center items-center gap-x-2 rounded-lg border border-transparent text-muted-foreground-1 hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                    <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"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
                                  </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dupc7">
                                    <div class="p-1">
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" data-hs-overlay="#hs-pro-detm">
                                        <svg class="shrink-0 size-3.5" 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="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
                                        Edit team
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <svg class="shrink-0 size-3.5" 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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                                        Add to favorites
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <svg class="shrink-0 size-3.5" 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"><rect width="20" height="5" x="2" y="4" rx="2"/><path d="M4 9v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9"/><path d="M10 13h4"/></svg>
                                        Archive team
                                      </button>

<div class="p-4 relative flex flex-col bg-card border border-card-line rounded-xl">
                        <div class="grid lg:grid-cols-12 gap-y-2 lg:gap-y-0 gap-x-4">
                          <div class="lg:col-span-3">
                            <p>
                              <a class="inline-flex items-center gap-x-1 text-foreground decoration-2 hover:underline font-semibold hover:text-primary-hover focus:outline-hidden focus:underline focus:text-primary-focus" href="#">
                                #conference
                              </a>
                            </p>
      
                            
                            <div class="mt-1 lg:mt-2 flex flex-wrap gap-1.5">
                              <span class="m-0.5 p-1.5 sm:p-2 inline-block bg-surface text-surface-foreground text-xs rounded-md">Marketing</span>
                              
                            </div>
                            
                          </div>

<div class="lg:col-span-6">
                            <p class="mt-1 text-sm text-muted-foreground-1">
                              Online meeting services group
                            </p>

<div class="mt-2 flex items-center gap-x-3">
                              <p class="text-xs uppercase text-muted-foreground-1">
                                Members:
                              </p>
                              <div class="flex items-center -space-x-2">
                                <span class="flex shrink-0 justify-center items-center size-7 bg-layer border border-layer-line text-layer-foreground text-xs font-medium uppercase rounded-full">W</span>
                                <span class="flex shrink-0 justify-center items-center size-7 bg-layer border border-layer-line text-layer-foreground text-xs font-medium uppercase rounded-full">L</span>
                                <span class="flex shrink-0 justify-center items-center size-7 bg-layer border border-layer-line text-layer-foreground text-xs font-medium uppercase rounded-full">S</span>
                                <span class="flex shrink-0 justify-center items-center size-7 bg-layer border border-layer-line text-layer-foreground text-xs font-medium uppercase rounded-full">O</span>
                              </div>
                            </div>
                            
                          </div>

<div class="lg:order-1 lg:ms-auto">
                                
                                <div class="hs-dropdown [--placement:bottom-right] relative inline-flex">
                                  <button id="hs-pro-dupc8" type="button" class="size-9.5 lg:size-7 inline-flex justify-center items-center gap-x-2 rounded-lg border border-transparent text-muted-foreground-1 hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                    <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"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
                                  </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dupc8">
                                    <div class="p-1">
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" data-hs-overlay="#hs-pro-detm">
                                        <svg class="shrink-0 size-3.5" 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="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
                                        Edit team
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <svg class="shrink-0 size-3.5" 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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                                        Add to favorites
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <svg class="shrink-0 size-3.5" 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"><rect width="20" height="5" x="2" y="4" rx="2"/><path d="M4 9v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9"/><path d="M10 13h4"/></svg>
                                        Archive team
                                      </button>

<button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-destructive hover:bg-destructive-hover/10 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-destructive-focus/10" data-hs-overlay="#hs-pro-chhdl">
                                        <svg class="shrink-0 size-3.5" 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="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                                        Delete team
                                      </button>
                                    </div>
                                  </div>
                                </div>
                                
                              </div>
                              
                            </div>
                            
                          </div>
                          
                        </div>
                      </div>
                      
                    </div>
                    
                
                <div id="hs-pro-datm" class="hs-overlay hidden size-full fixed top-0 inset-s-0 z-80 overflow-x-hidden overflow-y-auto [--close-when-click-inside:true] pointer-events-none" role="dialog" tabindex="-1" aria-labelledby="hs-pro-datm-label">
                  <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-xl sm:w-full mx-3 mb-7 h-[calc(100%-56px)] min-h-[calc(100%-56px)] sm:mx-auto">
                    <div class="w-full max-h-full flex flex-col bg-overlay border border-overlay-line rounded-xl pointer-events-auto shadow-xl">
                      
                      <div class="py-2.5 px-4 flex justify-between items-center border-b border-overlay-divider">
                        <h2 id="hs-pro-datm-label" class="font-medium text-foreground">
                          Create team
                        </h2>
                        <button type="button" class="size-8 shrink-0 flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-surface text-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" aria-label="Close" data-hs-overlay="#hs-pro-datm">
                          <span class="sr-only">Close</span>
                          <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="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                        </button>
                      </div>

<div class="overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                        <div class="p-4 space-y-5">
                          <div class="space-y-2">
                            <label for="hs-pro-dactmt" class="block mb-2 text-sm font-medium text-foreground">
                              Title
                            </label>

<div class="space-y-2">
                            <label for="dactmi" class="block mb-2 text-sm font-medium text-foreground">
                              Industry
                            </label>

<div class="space-y-2">
                            <label for="dactmd" class="block mb-2 text-sm font-medium text-foreground">
                              Description
                            </label>

<div class="space-y-2">
                            <label for="dactmm" class="block mb-2 text-sm font-medium text-foreground">
                              Members
                            </label>

<div class="flex flex-col sm:flex-row sm:items-center gap-3">
                              <input id="dactmm" type="text" class="py-1.5 sm:py-2 px-3 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-layer-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:z-10 focus:ring-primary-focus" placeholder="Enter name">

<div class="space-y-2">
                            <label class="block mb-2 text-sm font-medium text-foreground">
                              Suggested members
                            </label>

<div class="flex items-center space-x-2">
                              
                              <div class="hs-tooltip inline-block">
                                <label for="hs-pro-dactcach1" class="relative block rounded-full cursor-pointer">
                                  <img class="hs-tooltip-toggle shrink-0 size-11 bg-layer border border-layer-line rounded-full" src="https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
                                  <span class="block absolute -top-1 -inset-e-1 bg-layer rounded-full">
                                    <span class="relative flex flex-col justify-center items-center size-5 bg-surface border-2 border-layer text-surface-foreground rounded-full">
                                      <input type="checkbox" id="hs-pro-dactcach1" class="absolute top-0 inset-s-0 size-full bg-transparent border-transparent checked:bg-primary-checked focus:ring-0 focus:ring-offset-0 rounded-full focus:outline-hidden"  >
                                      <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                        <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"/>
                                      </svg>
                                    </span>
                                  </span>
                                </label>
                                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                  James Collins
                                </span>
                              </div>

<div class="hs-tooltip inline-block">
                                <label for="hs-pro-dactcach2" class="relative block rounded-full cursor-pointer">
                                  <span class="hs-tooltip-toggle flex shrink-0 justify-center items-center size-11 bg-layer border border-layer-line text-layer-foreground font-medium uppercase rounded-full">L</span><span class="block absolute -top-1 -inset-e-1 bg-layer rounded-full">
                                    <span class="relative flex flex-col justify-center items-center size-5 bg-surface border-2 border-layer text-surface-foreground rounded-full">
                                      <input type="checkbox" id="hs-pro-dactcach2" class="absolute top-0 inset-s-0 size-full bg-transparent border-transparent checked:bg-primary-checked focus:ring-0 focus:ring-offset-0 rounded-full focus:outline-hidden"  >
                                      <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                        <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"/>
                                      </svg>
                                    </span>
                                  </span>
                                </label>
                                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                  Lori Hunter
                                </span>
                              </div>

<div class="hs-tooltip inline-block">
                                <label for="hs-pro-dactcach3" class="relative block rounded-full cursor-pointer">
                                  <img class="hs-tooltip-toggle shrink-0 size-11 bg-layer border border-layer-line 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=320&h=320&q=80" alt="Avatar">
                                  <span class="block absolute -top-1 -inset-e-1 bg-layer rounded-full">
                                    <span class="relative flex flex-col justify-center items-center size-5 bg-surface border-2 border-layer text-surface-foreground rounded-full">
                                      <input type="checkbox" id="hs-pro-dactcach3" class="absolute top-0 inset-s-0 size-full bg-transparent border-transparent checked:bg-primary-checked focus:ring-0 focus:ring-offset-0 rounded-full focus:outline-hidden"  >
                                      <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                        <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"/>
                                      </svg>
                                    </span>
                                  </span>
                                </label>
                                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                  Lewis Clarke
                                </span>
                              </div>

<div class="hs-tooltip inline-block">
                                <label for="hs-pro-dactcach4" class="relative block rounded-full cursor-pointer">
                                  <img class="hs-tooltip-toggle shrink-0 size-11 bg-layer border border-layer-line 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=320&h=320&q=80" alt="Avatar">
                                  <span class="block absolute -top-1 -inset-e-1 bg-layer rounded-full">
                                    <span class="relative flex flex-col justify-center items-center size-5 bg-surface border-2 border-layer text-surface-foreground rounded-full">
                                      <input type="checkbox" id="hs-pro-dactcach4" class="absolute top-0 inset-s-0 size-full bg-transparent border-transparent checked:bg-primary-checked focus:ring-0 focus:ring-offset-0 rounded-full focus:outline-hidden"  >
                                      <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                        <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"/>
                                      </svg>
                                    </span>
                                  </span>
                                </label>
                                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                  Ella Lauda
                                </span>
                              </div>

<div class="hs-tooltip inline-block">
                                <label for="hs-pro-dactcach5" class="relative block rounded-full cursor-pointer">
                                  <span class="hs-tooltip-toggle flex shrink-0 justify-center items-center size-11 bg-layer border border-layer-line text-layer-foreground font-medium uppercase rounded-full">O</span><span class="block absolute -top-1 -inset-e-1 bg-layer rounded-full">
                                    <span class="relative flex flex-col justify-center items-center size-5 bg-surface border-2 border-layer text-surface-foreground rounded-full">
                                      <input type="checkbox" id="hs-pro-dactcach5" class="absolute top-0 inset-s-0 size-full bg-transparent border-transparent checked:bg-primary-checked focus:ring-0 focus:ring-offset-0 rounded-full focus:outline-hidden"  >
                                      <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                        <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"/>
                                      </svg>
                                    </span>
                                  </span>
                                </label>
                                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                  Ols Schols
                                </span>
                              </div>
                              
                            </div>
                          </div>

<div class="space-y-2">
                            <label class="block block mb-2 text-sm font-medium text-foreground">
                              Cover
                            </label>
                            <div class="p-12 flex justify-center bg-layer border border-dashed border-layer-line rounded-xl">
                              <div class="text-center">
                                <svg class="shrink-0 w-16 text-muted-foreground mx-auto" width="73" height="47" viewBox="0 0 73 47" fill="none" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M54.519 40.4773V6.76876C54.519 3.92686 52.2121 1.62305 49.3664 1.62305H22.7076C19.8619 1.62305 17.555 3.92686 17.555 6.76876V40.4773M54.519 40.4773C54.519 43.3192 52.2121 45.6231 49.3664 45.6231H22.7076C19.8619 45.6231 17.555 43.3192 17.555 40.4773M54.519 40.4773L54.5189 34.6563L48.6564 28.3566L43.2612 34.6373C42.4421 35.5908 40.9662 35.5955 40.141 34.6472L30.3406 23.3844L17.555 36.9154V40.4773M6.20483 9.59424L17.707 7.6798V42.5188L12.6457 43.5828C9.25658 44.2954 5.94238 42.0892 5.29702 38.691L1.14643 16.8357C0.500082 13.4322 2.78322 10.1637 6.20483 9.59424ZM65.8691 9.59424L54.3669 7.6798V42.5188L59.4282 43.5828C62.8173 44.2954 66.1316 42.0892 66.7769 38.691L70.9274 16.8357C71.5738 13.4322 69.2907 10.1637 65.8691 9.59424ZM45.0584 15.3561C45.0584 17.7228 43.1372 19.6413 40.7673 19.6413C38.3974 19.6413 36.4762 17.7228 36.4762 15.3561C36.4762 12.9894 38.3974 11.0708 40.7673 11.0708C43.1372 11.0708 45.0584 12.9894 45.0584 15.3561Z" stroke="currentColor" stroke-width="2"/>
                                </svg>

<div class="mt-4 flex flex-wrap justify-center text-sm/6 text-muted-foreground-1">
                                  <span class="pe-1 font-medium text-foreground">
                                    Drop your files here or
                                  </span>
                                  <label for="hs-pro-dactc" class="relative cursor-pointer bg-transparent font-semibold text-primary hover:text-primary-hover rounded-lg decoration-2 hover:underline focus-within:outline-hidden focus-within:ring-2 focus-within:ring-primary-focus focus-within:ring-offset-2">
                                    <span>browse</span>
                                    <input id="hs-pro-dactc" type="file" class="sr-only">
                                  </label>
                                </div>

<div class="p-4 flex justify-between gap-x-2">
                        <div class="flex-1 flex justify-end items-center gap-2">
                          <button type="button" class="py-2 px-3 text-nowrap inline-flex justify-center items-center text-start whitespace-nowrap bg-layer border border-layer-line text-layer-foreground text-sm font-medium rounded-lg shadow-2xs align-middle hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-overlay="#hs-pro-datm">
                            Cancel
                          </button>

<button type="button" class="py-2 px-3 text-nowrap inline-flex justify-center items-center gap-x-2 text-start whitespace-nowrap bg-primary border border-primary-line text-primary-foreground text-sm font-medium rounded-lg shadow-2xs align-middle hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus" data-hs-overlay="#hs-pro-datm">
                            Create team
                          </button>
                        </div>
                      </div>
                      
                    </div>
                  </div>
                </div>
                
                
                <div id="hs-pro-detm" class="hs-overlay hidden size-full fixed top-0 inset-s-0 z-80 overflow-x-hidden overflow-y-auto [--close-when-click-inside:true] pointer-events-none" role="dialog" tabindex="-1" aria-labelledby="hs-pro-detm-label">
                  <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-xl sm:w-full mx-3 mb-7 h-[calc(100%-56px)] min-h-[calc(100%-56px)] sm:mx-auto">
                    <div class="w-full max-h-full flex flex-col bg-overlay border border-overlay-line rounded-xl pointer-events-auto shadow-xl">
                      
                      <div class="py-2.5 px-4 flex justify-between items-center border-b border-overlay-divider">
                        <h2 id="hs-pro-detm-label" class="font-medium text-foreground">
                          Edit team
                        </h2>
                        <button type="button" class="size-8 shrink-0 flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-surface text-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" aria-label="Close" data-hs-overlay="#hs-pro-detm">
                          <span class="sr-only">Close</span>
                          <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="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                        </button>
                      </div>

<div class="overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                        <div class="p-4 space-y-5">
                          <div class="space-y-2">
                            <label for="hs-pro-daetmt" class="block mb-2 text-sm font-medium text-foreground">
                              Title
                            </label>

<div class="space-y-2">
                            <label for="daetmi" class="block mb-2 text-sm font-medium text-foreground">
                              Industry
                            </label>

<div class="space-y-2">
                            <label for="daetmd" class="block mb-2 text-sm font-medium text-foreground">
                              Description
                            </label>

<textarea id="daetmd" class="py-1.5 sm:py-2 px-3 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-layer-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:z-10 focus:ring-primary-focus" rows="3" placeholder="Tell us a little bit about team" data-hs-textarea-auto-height>Online meeting services group</textarea>
                          </div>

<div class="space-y-2">
                            <label for="daetmm" class="block mb-2 text-sm font-medium text-foreground">
                              Members
                            </label>

<div class="flex flex-col sm:flex-row sm:items-center gap-3">
                              <input id="daetmm" type="text" class="py-1.5 sm:py-2 px-3 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-layer-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:z-10 focus:ring-primary-focus" placeholder="Enter name">

<div class="space-y-2">
                            <label class="block mb-2 text-sm font-medium text-foreground">
                              Suggested members
                            </label>

<div class="flex items-center space-x-2">
                              
                              <div class="hs-tooltip inline-block">
                                <label for="hs-pro-daetcach1" class="relative block rounded-full cursor-pointer">
                                  <img class="hs-tooltip-toggle shrink-0 size-11 bg-layer border border-layer-line rounded-full" src="https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
                                  <span class="block absolute -top-1 -inset-e-1 bg-layer rounded-full">
                                    <span class="relative flex flex-col justify-center items-center size-5 bg-surface border-2 border-layer text-surface-foreground rounded-full">
                                      <input type="checkbox" id="hs-pro-daetcach1" class="absolute top-0 inset-s-0 size-full bg-transparent border-transparent checked:bg-primary-checked focus:ring-0 focus:ring-offset-0 rounded-full focus:outline-hidden" checked >
                                      <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                        <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"/>
                                      </svg>
                                    </span>
                                  </span>
                                </label>
                                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                  James Collins
                                </span>
                              </div>

<div class="hs-tooltip inline-block">
                                <label for="hs-pro-daetcach2" class="relative block rounded-full cursor-pointer">
                                  <span class="hs-tooltip-toggle flex shrink-0 justify-center items-center size-11 bg-layer border border-layer-line text-layer-foreground font-medium uppercase rounded-full">L</span><span class="block absolute -top-1 -inset-e-1 bg-layer rounded-full">
                                    <span class="relative flex flex-col justify-center items-center size-5 bg-surface border-2 border-layer text-surface-foreground rounded-full">
                                      <input type="checkbox" id="hs-pro-daetcach2" class="absolute top-0 inset-s-0 size-full bg-transparent border-transparent checked:bg-primary-checked focus:ring-0 focus:ring-offset-0 rounded-full focus:outline-hidden"  >
                                      <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                        <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"/>
                                      </svg>
                                    </span>
                                  </span>
                                </label>
                                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                  Lori Hunter
                                </span>
                              </div>

<div class="hs-tooltip inline-block">
                                <label for="hs-pro-daetcach3" class="relative block rounded-full cursor-pointer">
                                  <img class="hs-tooltip-toggle shrink-0 size-11 bg-layer border border-layer-line 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=320&h=320&q=80" alt="Avatar">
                                  <span class="block absolute -top-1 -inset-e-1 bg-layer rounded-full">
                                    <span class="relative flex flex-col justify-center items-center size-5 bg-surface border-2 border-layer text-surface-foreground rounded-full">
                                      <input type="checkbox" id="hs-pro-daetcach3" class="absolute top-0 inset-s-0 size-full bg-transparent border-transparent checked:bg-primary-checked focus:ring-0 focus:ring-offset-0 rounded-full focus:outline-hidden"  >
                                      <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                        <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"/>
                                      </svg>
                                    </span>
                                  </span>
                                </label>
                                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                  Lewis Clarke
                                </span>
                              </div>

<div class="hs-tooltip inline-block">
                                <label for="hs-pro-daetcach4" class="relative block rounded-full cursor-pointer">
                                  <img class="hs-tooltip-toggle shrink-0 size-11 bg-layer border border-layer-line 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=320&h=320&q=80" alt="Avatar">
                                  <span class="block absolute -top-1 -inset-e-1 bg-layer rounded-full">
                                    <span class="relative flex flex-col justify-center items-center size-5 bg-surface border-2 border-layer text-surface-foreground rounded-full">
                                      <input type="checkbox" id="hs-pro-daetcach4" class="absolute top-0 inset-s-0 size-full bg-transparent border-transparent checked:bg-primary-checked focus:ring-0 focus:ring-offset-0 rounded-full focus:outline-hidden"  >
                                      <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                        <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"/>
                                      </svg>
                                    </span>
                                  </span>
                                </label>
                                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                  Ella Lauda
                                </span>
                              </div>

<div class="hs-tooltip inline-block">
                                <label for="hs-pro-daetcach5" class="relative block rounded-full cursor-pointer">
                                  <span class="hs-tooltip-toggle flex shrink-0 justify-center items-center size-11 bg-layer border border-layer-line text-layer-foreground font-medium uppercase rounded-full">O</span><span class="block absolute -top-1 -inset-e-1 bg-layer rounded-full">
                                    <span class="relative flex flex-col justify-center items-center size-5 bg-surface border-2 border-layer text-surface-foreground rounded-full">
                                      <input type="checkbox" id="hs-pro-daetcach5" class="absolute top-0 inset-s-0 size-full bg-transparent border-transparent checked:bg-primary-checked focus:ring-0 focus:ring-offset-0 rounded-full focus:outline-hidden" checked >
                                      <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                        <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"/>
                                      </svg>
                                    </span>
                                  </span>
                                </label>
                                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                  Ols Schols
                                </span>
                              </div>
                              
                            </div>
                          </div>

<div class="mt-4 flex flex-wrap justify-center text-sm/6 text-muted-foreground-1">
                                  <span class="pe-1 font-medium text-foreground">
                                    Drop your files here or
                                  </span>
                                  <label for="hs-pro-daetc" class="relative cursor-pointer bg-transparent font-semibold text-primary hover:text-primary-hover rounded-lg decoration-2 hover:underline focus-within:outline-hidden focus-within:ring-2 focus-within:ring-primary-focus focus-within:ring-offset-2">
                                    <span>browse</span>
                                    <input id="hs-pro-daetc" type="file" class="sr-only">
                                  </label>
                                </div>

<div class="p-4 flex justify-between gap-x-2">
                        <div class="flex-1 flex justify-end items-center gap-2">
                          <button type="button" class="py-2 px-3 text-nowrap inline-flex justify-center items-center text-start whitespace-nowrap bg-layer border border-layer-line text-layer-foreground text-sm font-medium rounded-lg shadow-2xs align-middle hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-overlay="#hs-pro-detm">
                            Cancel
                          </button>

Open related user profile teams page

A grid of profile cards pairs cover images with role details, bio content, and supporting stats.

<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 xl:gap-6">
                      
                      <div class="flex flex-col bg-card border border-card-line rounded-xl">
                        <figure class="shrink-0 relative h-24 overflow-hidden rounded-t-xl">
                          <svg class="w-full h-24 rounded-t-xl" preserveAspectRatio="xMidYMid slice" width="576" height="120" viewBox="0 0 576 120" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_666_273469qedas2)"><rect width="576" height="120" fill="#B2E7FE"/><rect x="289.678" y="-90.3" width="102.634" height="391.586" transform="rotate(59.5798 289.678 -90.3)" fill="#FF8F5D"/><rect x="41.3926" y="-0.996094" width="102.634" height="209.864" transform="rotate(-31.6412 41.3926 -0.996094)" fill="#3ECEED"/><rect x="66.9512" y="40.4817" width="102.634" height="104.844" transform="rotate(-31.6412 66.9512 40.4817)" fill="#4C48FF"/></g><defs><clipPath id="clip0_666_273469qedas2"><rect width="576" height="120" fill="white"/></clipPath></defs></svg>
                        </figure>

<div class="-mt-8 px-4 mb-3">
                          <div class="relative flex items-center gap-x-3">
                            <div class="relative w-20">
                              <img class="shrink-0 size-20 ring-4 ring-card rounded-3xl" src="https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">
                              <div class="absolute -bottom-3 inset-x-0 text-center">
                                <span class="py-1 px-2 inline-flex items-center gap-x-1 text-xs font-semibold uppercase rounded-md bg-linear-to-tr from-lime-500 to-teal-500 text-foreground-inverse">Pro</span>
                              </div>
                            </div>
      
                            <div class="absolute bottom-2 inset-e-0">
                              
                              <div class="h-full flex justify-end items-end gap-x-2">
                                
                                <button type="button" class="hs-tooltip flex justify-center items-center gap-x-3 size-8 text-sm border border-line-2 text-muted-foreground-1 hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                  <svg class="shrink-0 size-3.5" 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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                                  <span class="sr-only">Add to favorites</span>
                                  <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                    Add to favorites
                                  </span>
                                </button>

<div class="hs-dropdown [--strategy:absolute] [--placement:bottom-right] relative inline-flex">
                                  <button id="hs-pro-wccmdid1" type="button" class="flex justify-center items-center gap-x-3 size-8 text-sm border border-line-2 text-muted-foreground-1 hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                    <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"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
                                  </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-11 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-wccmdid1">
                                    <div class="p-1 space-y-0.5">
                                      <button type="button" class="w-full flex items-center gap-x-2 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <svg class="shrink-0 size-3.5" 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="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" x2="12" y1="2" y2="15"/></svg>
                                        Share
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-2 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <svg class="shrink-0 size-3.5" 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"><circle cx="12" cy="12" r="10"/><path d="m4.9 4.9 14.2 14.2"/></svg>
                                        Block user
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-2 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <svg class="shrink-0 size-3.5" 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="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                                        Delete
                                      </button>
                                    </div>
                                  </div>
                                  
                                </div>
                                
                              </div>
                              
                            </div>
                          </div>
                        </div>

<div class="p-4 h-full">
                          <h2 class="mb-2 font-medium text-foreground">
                            Amanda Harvey
                          </h2>

<dl class="grid grid-cols-2 gap-x-2">
                            <dt class="py-1 text-sm text-muted-foreground-1">
                              Role:
                            </dt>
                            <dd class="py-1 inline-flex justify-end items-center gap-x-2 text-end font-medium text-sm text-foreground">
                              Front-End Developer
                            </dd>

<dt class="py-1 text-sm text-muted-foreground-1">
                              Phone:
                            </dt>
                            <dd class="py-1 inline-flex justify-end items-center gap-x-2 text-end font-medium text-sm text-foreground">
                              (892) 312-5483
                            </dd>

<dt class="py-1 text-sm text-muted-foreground-1">
                              Email:
                            </dt>
                            <dd class="py-1 inline-flex justify-end items-center gap-x-2 text-end font-medium text-sm text-foreground">
                              amanda@email.com
                            </dd>

<div class="mt-3 flex flex-wrap gap-1">
                            <span class="py-1 px-2.5 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground">
                              Designer
                            </span>
                            <span class="py-1 px-2.5 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground">
                              Front-End
                            </span>
                            <span class="py-1 px-2.5 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground">
                              Brand Designer
                            </span>
                            <span class="py-1 px-2.5 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground">
                              Tool
                            </span>
                            <div class="hs-dropdown [--trigger:hover] inline-block">
                              <button id="hs-pro-wcctdid1" type="button" class="py-1 px-2.5 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground cursor-pointer" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                +2
                              </button>
                              <div class="hs-dropdown-menu hs-dropdown-open:opacity-100 max-w-64 transition-[opacity,margin] duration opacity-0 hidden overflow-hidden z-10 p-2 bg-dropdown border border-dropdown-line shadow-xl rounded-lg" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-wcctdid1">
                                <span class="py-1 px-2.5 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground">
                                  Web
                                </span>
                                <span class="py-1 px-2.5 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground">
                                  UI/UX
                                </span>
                              </div>
                            </div>
                          </div>
                          
                        </div>
                        
  
                        <div class="py-3 px-4 flex items-center gap-x-3 border-t border-card-footer">
                          <button type="button" class="w-full py-2 px-2.5 inline-flex justify-center items-center gap-x-1.5 text-[13px] font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                            <svg class="shrink-0 size-3.5" 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="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/><path d="M8 12h.01"/><path d="M12 12h.01"/><path d="M16 12h.01"/></svg>
                            Contact
                          </button>
                          <a class="w-full flex justify-center items-center gap-x-1.5 py-2 px-2.5 font-medium text-[13px] bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover rounded-md disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus" href="../../../templates/productivity/work-management/talent-details.html">
                            View profile
                            <svg class="shrink-0 size-3.5" 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="M7 7h10v10"/><path d="M7 17 17 7"/></svg>
                          </a>
                        </div>
                      </div>

<div class="flex flex-col bg-card border border-card-line rounded-xl">
                        <div class="shrink-0 h-24 bg-pink-200 dark:bg-pink-800 rounded-t-xl"></div>

<div class="-mt-8 px-4 mb-3">
                          <div class="relative flex items-center gap-x-3">
                            <div class="relative w-20">
                              <span class="flex shrink-0 justify-center items-center size-20 bg-pink-200 text-pink-800 dark:bg-pink-800 dark:text-pink-200 text-2xl font-medium uppercase rounded-3xl ring-4 ring-card">
                                D
                              </span>
                            </div>
      
                            <div class="absolute bottom-2 inset-e-0">
                              
                              <div class="h-full flex justify-end items-end gap-x-2">
                                
                                <button type="button" class="hs-tooltip flex justify-center items-center gap-x-3 size-8 text-sm border border-line-2 text-muted-foreground-1 hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                  <svg class="shrink-0 size-3.5" 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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                                  <span class="sr-only">Add to favorites</span>
                                  <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                    Add to favorites
                                  </span>
                                </button>

<div class="hs-dropdown [--strategy:absolute] [--placement:bottom-right] relative inline-flex">
                                  <button id="hs-pro-wccmdid2" type="button" class="flex justify-center items-center gap-x-3 size-8 text-sm border border-line-2 text-muted-foreground-1 hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                    <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"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
                                  </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-11 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-wccmdid2">
                                    <div class="p-1 space-y-0.5">
                                      <button type="button" class="w-full flex items-center gap-x-2 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <svg class="shrink-0 size-3.5" 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="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" x2="12" y1="2" y2="15"/></svg>
                                        Share
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-2 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <svg class="shrink-0 size-3.5" 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"><circle cx="12" cy="12" r="10"/><path d="m4.9 4.9 14.2 14.2"/></svg>
                                        Block user
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-2 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <svg class="shrink-0 size-3.5" 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="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                                        Delete
                                      </button>
                                    </div>
                                  </div>
                                  
                                </div>
                                
                              </div>
                              
                            </div>
                          </div>
                        </div>

<div class="p-4 h-full">
                          <h2 class="mb-2 font-medium text-foreground">
                            Daniel Hobbs
                          </h2>

<div class="flex flex-col bg-card border border-card-line rounded-xl">
                        <img class="w-full h-24 object-cover rounded-t-xl" src="https://images.unsplash.com/photo-1716184047641-bd7c469853c7?q=80&w=330&h=100&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Hero Background">

<div class="-mt-8 px-4 mb-3">
                          <div class="relative flex items-center gap-x-3">
                            <div class="relative w-20">
                              <img class="shrink-0 size-20 ring-4 ring-card rounded-3xl" src="https://images.unsplash.com/photo-1670272505340-d906d8d77d03?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">
                              <div class="absolute -bottom-3 inset-x-0 text-center">
                                <span class="py-1 px-2 inline-flex items-center gap-x-1 text-xs font-semibold uppercase rounded-md bg-linear-to-tr from-lime-500 to-teal-500 text-foreground-inverse">Pro</span>
                              </div>
                            </div>
      
                            <div class="absolute bottom-2 inset-e-0">
                              
                              <div class="h-full flex justify-end items-end gap-x-2">
                                
                                <button type="button" class="hs-tooltip flex justify-center items-center gap-x-3 size-8 text-sm border border-line-2 text-muted-foreground-1 hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                  <svg class="shrink-0 size-3.5" 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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                                  <span class="sr-only">Add to favorites</span>
                                  <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                    Add to favorites
                                  </span>
                                </button>

<div class="hs-dropdown [--strategy:absolute] [--placement:bottom-right] relative inline-flex">
                                  <button id="hs-pro-wccmdid3" type="button" class="flex justify-center items-center gap-x-3 size-8 text-sm border border-line-2 text-muted-foreground-1 hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                    <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"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
                                  </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-11 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-wccmdid3">
                                    <div class="p-1 space-y-0.5">
                                      <button type="button" class="w-full flex items-center gap-x-2 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <svg class="shrink-0 size-3.5" 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="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" x2="12" y1="2" y2="15"/></svg>
                                        Share
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-2 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <svg class="shrink-0 size-3.5" 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"><circle cx="12" cy="12" r="10"/><path d="m4.9 4.9 14.2 14.2"/></svg>
                                        Block user
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-2 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <svg class="shrink-0 size-3.5" 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="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                                        Delete
                                      </button>
                                    </div>
                                  </div>
                                  
                                </div>
                                
                              </div>
                              
                            </div>
                          </div>
                        </div>

<div class="p-4 h-full">
                          <h2 class="mb-2 font-medium text-foreground">
                            Anna Richard
                          </h2>

<dt class="py-1 text-sm text-muted-foreground-1">
                              Hourly price:
                            </dt>
                            <dd class="py-1 inline-flex justify-end items-center gap-x-2 text-end font-medium text-sm text-foreground">
                              $5-$999
                            </dd>
                          </dl>
                          
                        </div>
                        
  
                        <div class="py-3 px-4 flex items-center gap-x-3 border-t border-card-footer">
                          <button type="button" class="w-full py-2 px-2.5 inline-flex justify-center items-center gap-x-1.5 text-[13px] font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                            <svg class="shrink-0 size-3.5" 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="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/><path d="M8 12h.01"/><path d="M12 12h.01"/><path d="M16 12h.01"/></svg>
                            Contact
                          </button>
                          <a class="w-full flex justify-center items-center gap-x-1.5 py-2 px-2.5 font-medium text-[13px] bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover rounded-md disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus" href="../../../templates/productivity/work-management/talent-details.html">
                            View profile
                            <svg class="shrink-0 size-3.5" 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="M7 7h10v10"/><path d="M7 17 17 7"/></svg>
                          </a>
                        </div>
                      </div>

<div class="flex flex-col bg-card border border-card-line rounded-xl">
                        <div class="shrink-0 h-24 bg-sky-200 dark:bg-sky-800/50 rounded-t-xl"></div>

<div class="-mt-8 px-4 mb-3">
                          <div class="relative flex items-center gap-x-3">
                            <div class="relative w-20">
                              <span class="flex shrink-0 justify-center items-center size-20 bg-sky-200 text-sky-800 dark:bg-sky-800 dark:text-sky-200 text-2xl font-medium uppercase rounded-3xl ring-4 ring-card">
                                L
                              </span>
                            </div>
      
                            <div class="absolute bottom-2 inset-e-0">
                              
                              <div class="h-full flex justify-end items-end gap-x-2">
                                
                                <button type="button" class="hs-tooltip flex justify-center items-center gap-x-3 size-8 text-sm border border-line-2 text-muted-foreground-1 hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                  <svg class="shrink-0 size-3.5" 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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                                  <span class="sr-only">Add to favorites</span>
                                  <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                    Add to favorites
                                  </span>
                                </button>

<div class="hs-dropdown [--strategy:absolute] [--placement:bottom-right] relative inline-flex">
                                  <button id="hs-pro-wccmdid4" type="button" class="flex justify-center items-center gap-x-3 size-8 text-sm border border-line-2 text-muted-foreground-1 hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                    <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"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
                                  </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-11 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-wccmdid4">
                                    <div class="p-1 space-y-0.5">
                                      <button type="button" class="w-full flex items-center gap-x-2 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <svg class="shrink-0 size-3.5" 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="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" x2="12" y1="2" y2="15"/></svg>
                                        Share
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-2 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <svg class="shrink-0 size-3.5" 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"><circle cx="12" cy="12" r="10"/><path d="m4.9 4.9 14.2 14.2"/></svg>
                                        Block user
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-2 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <svg class="shrink-0 size-3.5" 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="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                                        Delete
                                      </button>
                                    </div>
                                  </div>
                                  
                                </div>
                                
                              </div>
                              
                            </div>
                          </div>
                        </div>

<div class="p-4 h-full">
                          <h2 class="mb-2 font-medium text-foreground">
                            Liza Harrison
                          </h2>

<div class="mt-3 flex flex-wrap gap-1">
                            <span class="py-1 px-2.5 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground">
                              Illustrator
                            </span>
                            <span class="py-1 px-2.5 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground">
                              Adobe
                            </span>
                            <span class="py-1 px-2.5 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground">
                              Figma
                            </span>
                            <span class="py-1 px-2.5 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground">
                              Sketch
                            </span>
                          </div>
                          
                        </div>
                        
  
                        <div class="py-3 px-4 flex items-center gap-x-3 border-t border-card-footer">
                          <button type="button" class="w-full py-2 px-2.5 inline-flex justify-center items-center gap-x-1.5 text-[13px] font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                            <svg class="shrink-0 size-3.5" 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="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/><path d="M8 12h.01"/><path d="M12 12h.01"/><path d="M16 12h.01"/></svg>
                            Contact
                          </button>
                          <a class="w-full flex justify-center items-center gap-x-1.5 py-2 px-2.5 font-medium text-[13px] bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover rounded-md disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus" href="../../../templates/productivity/work-management/talent-details.html">
                            View profile
                            <svg class="shrink-0 size-3.5" 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="M7 7h10v10"/><path d="M7 17 17 7"/></svg>
                          </a>
                        </div>
                      </div>
                      
  
                      
                      <div class="flex flex-col bg-card border border-card-line rounded-xl">
                        <figure class="shrink-0 relative h-24 overflow-hidden rounded-t-xl">
                          <svg class="w-full h-24 rounded-t-xl" preserveAspectRatio="xMidYMid slice" width="1113" height="161" viewBox="0 0 1113 161" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_666_2207232312)"><rect x="0.5" width="1112" height="161" rx="12" fill="white"></rect><rect x="1" width="1112" height="348" fill="#D9DEEA"></rect><path d="M512.694 359.31C547.444 172.086 469.835 34.2204 426.688 -11.3096H1144.27V359.31H512.694Z" fill="#C0CBDD"></path><path d="M818.885 185.745C703.515 143.985 709.036 24.7949 726.218 -29.5801H1118.31V331.905C1024.49 260.565 963.098 237.945 818.885 185.745Z" fill="#8192B0"></path></g><defs><clipPath id="clip0_666_2207232312"><rect x="0.5" width="1112" height="161" rx="12" fill="white"></rect></clipPath></defs></svg>
                        </figure>

<div class="-mt-8 px-4 mb-3">
                          <div class="relative flex items-center gap-x-3">
                            <div class="relative w-20">
                              <img class="shrink-0 size-20 ring-4 ring-card rounded-3xl" src="https://images.unsplash.com/photo-1679412330254-90cb240038c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
                              <div class="absolute -bottom-3 inset-x-0 text-center">
                                <span class="py-1 px-2 inline-flex items-center gap-x-1 text-xs font-semibold uppercase rounded-md bg-linear-to-tr from-lime-500 to-teal-500 text-foreground-inverse">Pro</span>
                              </div>
                            </div>
      
                            <div class="absolute bottom-2 inset-e-0">
                              
                              <div class="h-full flex justify-end items-end gap-x-2">
                                
                                <button type="button" class="hs-tooltip flex justify-center items-center gap-x-3 size-8 text-sm border border-line-2 text-muted-foreground-1 hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                  <svg class="shrink-0 size-3.5" 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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                                  <span class="sr-only">Add to favorites</span>
                                  <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                    Add to favorites
                                  </span>
                                </button>

<div class="hs-dropdown [--strategy:absolute] [--placement:bottom-right] relative inline-flex">
                                  <button id="hs-pro-wccmdid7" type="button" class="flex justify-center items-center gap-x-3 size-8 text-sm border border-line-2 text-muted-foreground-1 hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                    <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"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
                                  </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-11 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-wccmdid7">
                                    <div class="p-1 space-y-0.5">
                                      <button type="button" class="w-full flex items-center gap-x-2 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <svg class="shrink-0 size-3.5" 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="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" x2="12" y1="2" y2="15"/></svg>
                                        Share
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-2 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <svg class="shrink-0 size-3.5" 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"><circle cx="12" cy="12" r="10"/><path d="m4.9 4.9 14.2 14.2"/></svg>
                                        Block user
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-2 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <svg class="shrink-0 size-3.5" 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="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                                        Delete
                                      </button>
                                    </div>
                                  </div>
                                  
                                </div>
                                
                              </div>
                              
                            </div>
                          </div>
                        </div>

<div class="p-4 h-full">
                          <h2 class="mb-2 font-medium text-foreground">
                            Lewis Clarke
                          </h2>

<dl class="grid grid-cols-2 gap-x-2">
                            <dt class="py-1 text-sm text-muted-foreground-1">
                              Role:
                            </dt>
                            <dd class="py-1 inline-flex justify-end items-center gap-x-2 text-end font-medium text-sm text-foreground">
                              Full-Stack Developer
                            </dd>

<div class="mt-3 flex flex-wrap gap-1">
                            <span class="py-1 px-2.5 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground">
                              HTML
                            </span>
                            <span class="py-1 px-2.5 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground">
                              Front-End
                            </span>
                            <span class="py-1 px-2.5 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground">
                              Back-End
                            </span>
                            <span class="py-1 px-2.5 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground">
                              React
                            </span>
                            <div class="hs-dropdown [--trigger:hover] inline-block">
                              <button id="hs-pro-wcctdid7" type="button" class="py-1 px-2.5 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground cursor-pointer" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                +1
                              </button>
                              <div class="hs-dropdown-menu hs-dropdown-open:opacity-100 max-w-64 transition-[opacity,margin] duration opacity-0 hidden overflow-hidden z-10 p-2 bg-dropdown border border-dropdown-line shadow-xl rounded-lg" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-wcctdid7">
                                <span class="py-1 px-2.5 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground">
                                  CSS
                                </span>
                              </div>
                            </div>
                          </div>
                          
                        </div>
                        
  
                        <div class="py-3 px-4 flex items-center gap-x-3 border-t border-card-footer">
                          <button type="button" class="w-full py-2 px-2.5 inline-flex justify-center items-center gap-x-1.5 text-[13px] font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                            <svg class="shrink-0 size-3.5" 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="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/><path d="M8 12h.01"/><path d="M12 12h.01"/><path d="M16 12h.01"/></svg>
                            Contact
                          </button>
                          <a class="w-full flex justify-center items-center gap-x-1.5 py-2 px-2.5 font-medium text-[13px] bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover rounded-md disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus" href="../../../templates/productivity/work-management/talent-details.html">
                            View profile
                            <svg class="shrink-0 size-3.5" 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="M7 7h10v10"/><path d="M7 17 17 7"/></svg>
                          </a>
                        </div>
                      </div>

<div class="flex flex-col bg-card border border-card-line rounded-xl">
                        <div class="shrink-0 h-24 bg-orange-200 dark:bg-orange-800 rounded-t-xl"></div>

<div class="-mt-8 px-4 mb-3">
                          <div class="relative flex items-center gap-x-3">
                            <div class="relative w-20">
                              <img class="shrink-0 size-20 ring-4 ring-card rounded-3xl" src="https://images.unsplash.com/photo-1659482634023-2c4fda99ac0c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
                            </div>
      
                            <div class="absolute bottom-2 inset-e-0">
                              
                              <div class="h-full flex justify-end items-end gap-x-2">
                                
                                <button type="button" class="hs-tooltip flex justify-center items-center gap-x-3 size-8 text-sm border border-line-2 text-muted-foreground-1 hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                  <svg class="shrink-0 size-3.5" 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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                                  <span class="sr-only">Add to favorites</span>
                                  <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                    Add to favorites
                                  </span>
                                </button>

<div class="hs-dropdown [--strategy:absolute] [--placement:bottom-right] relative inline-flex">
                                  <button id="hs-pro-wccmdid6" type="button" class="flex justify-center items-center gap-x-3 size-8 text-sm border border-line-2 text-muted-foreground-1 hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                    <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"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
                                  </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-11 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-wccmdid6">
                                    <div class="p-1 space-y-0.5">
                                      <button type="button" class="w-full flex items-center gap-x-2 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <svg class="shrink-0 size-3.5" 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="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" x2="12" y1="2" y2="15"/></svg>
                                        Share
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-2 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <svg class="shrink-0 size-3.5" 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"><circle cx="12" cy="12" r="10"/><path d="m4.9 4.9 14.2 14.2"/></svg>
                                        Block user
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-2 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <svg class="shrink-0 size-3.5" 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="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                                        Delete
                                      </button>
                                    </div>
                                  </div>
                                  
                                </div>
                                
                              </div>
                              
                            </div>
                          </div>
                        </div>

<div class="p-4 h-full">
                          <h2 class="mb-2 font-medium text-foreground">
                            Ella Lauda
                          </h2>

<div class="mt-3 flex flex-wrap gap-1">
                            <span class="py-1 px-2.5 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground">
                              Product Designer
                            </span>
                            <span class="py-1 px-2.5 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground">
                              Marketing
                            </span>
                            <span class="py-1 px-2.5 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground">
                              Brand Designer
                            </span>
                            <span class="py-1 px-2.5 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground">
                              Tool
                            </span>
                            <div class="hs-dropdown [--trigger:hover] inline-block">
                              <button id="hs-pro-wcctdid6" type="button" class="py-1 px-2.5 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground cursor-pointer" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                +2
                              </button>
                              <div class="hs-dropdown-menu hs-dropdown-open:opacity-100 max-w-64 transition-[opacity,margin] duration opacity-0 hidden overflow-hidden z-10 p-2 bg-dropdown border border-dropdown-line shadow-xl rounded-lg" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-wcctdid6">
                                <span class="py-1 px-2.5 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground">
                                  Designer
                                </span>
                                <span class="py-1 px-2.5 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground">
                                  Dancer
                                </span>
                              </div>
                            </div>
                          </div>
                          
                        </div>
                        
  
                        <div class="py-3 px-4 flex items-center gap-x-3 border-t border-card-footer">
                          <button type="button" class="w-full py-2 px-2.5 inline-flex justify-center items-center gap-x-1.5 text-[13px] font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                            <svg class="shrink-0 size-3.5" 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="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/><path d="M8 12h.01"/><path d="M12 12h.01"/><path d="M16 12h.01"/></svg>
                            Contact
                          </button>
                          <a class="w-full flex justify-center items-center gap-x-1.5 py-2 px-2.5 font-medium text-[13px] bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover rounded-md disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus" href="../../../templates/productivity/work-management/talent-details.html">
                            View profile
                            <svg class="shrink-0 size-3.5" 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="M7 7h10v10"/><path d="M7 17 17 7"/></svg>
                          </a>
                        </div>
                      </div>
                      
  
                      
                      <div class="flex flex-col bg-card border border-card-line rounded-xl">
                        <figure class="shrink-0 relative h-24 overflow-hidden rounded-t-xl">
                          <svg class="w-full h-24 rounded-t-xl" preserveAspectRatio="xMidYMid slice" width="1113" height="161" viewBox="0 0 1113 161" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_666_220723)"><rect x="0.5" width="1112" height="161" rx="12" fill="white"></rect><rect x="1" width="1112" height="348" fill="#D9DEEA"></rect><path d="M512.694 359.31C547.444 172.086 469.835 34.2204 426.688 -11.3096H1144.27V359.31H512.694Z" fill="#C0CBDD"></path><path d="M818.885 185.745C703.515 143.985 709.036 24.7949 726.218 -29.5801H1118.31V331.905C1024.49 260.565 963.098 237.945 818.885 185.745Z" fill="#8192B0"></path></g><defs><clipPath id="clip0_666_220723"><rect x="0.5" width="1112" height="161" rx="12" fill="white"></rect></clipPath></defs></svg>
                        </figure>

<div class="-mt-8 px-4 mb-3">
                          <div class="relative flex items-center gap-x-3">
                            <div class="relative w-20">
                              <img class="shrink-0 size-20 ring-4 ring-card rounded-3xl" src="https://images.unsplash.com/photo-1570654639102-bdd95efeca7a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
                              <div class="absolute -bottom-3 inset-x-0 text-center">
                                <span class="py-1 px-2 inline-flex items-center gap-x-1 text-xs font-semibold uppercase rounded-md bg-linear-to-tr from-lime-500 to-teal-500 text-foreground-inverse">Pro</span>
                              </div>
                            </div>
      
                            <div class="absolute bottom-2 inset-e-0">
                              
                              <div class="h-full flex justify-end items-end gap-x-2">
                                
                                <button type="button" class="hs-tooltip flex justify-center items-center gap-x-3 size-8 text-sm border border-line-2 text-muted-foreground-1 hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                  <svg class="shrink-0 size-3.5" 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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                                  <span class="sr-only">Add to favorites</span>
                                  <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                    Add to favorites
                                  </span>
                                </button>

<div class="hs-dropdown [--strategy:absolute] [--placement:bottom-right] relative inline-flex">
                                  <button id="hs-pro-wccmdid5" type="button" class="flex justify-center items-center gap-x-3 size-8 text-sm border border-line-2 text-muted-foreground-1 hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                    <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"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
                                  </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-11 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-wccmdid5">
                                    <div class="p-1 space-y-0.5">
                                      <button type="button" class="w-full flex items-center gap-x-2 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <svg class="shrink-0 size-3.5" 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="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" x2="12" y1="2" y2="15"/></svg>
                                        Share
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-2 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <svg class="shrink-0 size-3.5" 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"><circle cx="12" cy="12" r="10"/><path d="m4.9 4.9 14.2 14.2"/></svg>
                                        Block user
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-2 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <svg class="shrink-0 size-3.5" 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="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                                        Delete
                                      </button>
                                    </div>
                                  </div>
                                  
                                </div>
                                
                              </div>
                              
                            </div>
                          </div>
                        </div>

<div class="p-4 h-full">
                          <h2 class="mb-2 font-medium text-foreground">
                            Rachel Doe
                          </h2>

<dl class="grid grid-cols-2 gap-x-2">
                            <dt class="py-1 text-sm text-muted-foreground-1">
                              Role:
                            </dt>
                            <dd class="py-1 inline-flex justify-end items-center gap-x-2 text-end font-medium text-sm text-foreground">
                              Full-Stack Developer
                            </dd>

<div class="mt-3 flex flex-wrap gap-1">
                            <span class="py-1 px-2.5 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground">
                              React
                            </span>
                            <span class="py-1 px-2.5 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground">
                              JavaScript
                            </span>
                            <span class="py-1 px-2.5 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground">
                              Angular
                            </span>
                            <span class="py-1 px-2.5 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground">
                              TypeScript
                            </span>
                            <div class="hs-dropdown [--trigger:hover] inline-block">
                              <button id="hs-pro-wcctdid5" type="button" class="py-1 px-2.5 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground cursor-pointer" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                +2
                              </button>
                              <div class="hs-dropdown-menu hs-dropdown-open:opacity-100 max-w-64 transition-[opacity,margin] duration opacity-0 hidden overflow-hidden z-10 p-2 bg-dropdown border border-dropdown-line shadow-xl rounded-lg" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-wcctdid5">
                                <span class="py-1 px-2.5 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground">
                                  Vue
                                </span>
                                <span class="py-1 px-2.5 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground">
                                  Nuxt
                                </span>
                              </div>
                            </div>
                          </div>
                          
                        </div>
                        
  
                        <div class="py-3 px-4 flex items-center gap-x-3 border-t border-card-footer">
                          <button type="button" class="w-full py-2 px-2.5 inline-flex justify-center items-center gap-x-1.5 text-[13px] font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                            <svg class="shrink-0 size-3.5" 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="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/><path d="M8 12h.01"/><path d="M12 12h.01"/><path d="M16 12h.01"/></svg>
                            Contact
                          </button>
                          <a class="w-full flex justify-center items-center gap-x-1.5 py-2 px-2.5 font-medium text-[13px] bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover rounded-md disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus" href="../../../templates/productivity/work-management/talent-details.html">
                            View profile
                            <svg class="shrink-0 size-3.5" 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="M7 7h10v10"/><path d="M7 17 17 7"/></svg>
                          </a>
                        </div>
                      </div>

<div class="flex flex-col bg-card border border-card-line rounded-xl">
                        <div class="shrink-0 h-24 bg-purple-200 dark:bg-purple-800 rounded-t-xl"></div>

<div class="-mt-8 px-4 mb-3">
                          <div class="relative flex items-center gap-x-3">
                            <div class="relative w-20">
                              <span class="flex shrink-0 justify-center items-center size-20 bg-purple-200 text-purple-800 dark:bg-purple-800 dark:text-purple-200 text-2xl font-medium uppercase rounded-3xl ring-4 ring-card">
                                O
                              </span>
                            </div>
      
                            <div class="absolute bottom-2 inset-e-0">
                              
                              <div class="h-full flex justify-end items-end gap-x-2">
                                
                                <button type="button" class="hs-tooltip flex justify-center items-center gap-x-3 size-8 text-sm border border-line-2 text-muted-foreground-1 hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                  <svg class="shrink-0 size-3.5" 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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                                  <span class="sr-only">Add to favorites</span>
                                  <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                    Add to favorites
                                  </span>
                                </button>

<div class="hs-dropdown [--strategy:absolute] [--placement:bottom-right] relative inline-flex">
                                  <button id="hs-pro-wccmdid8" type="button" class="flex justify-center items-center gap-x-3 size-8 text-sm border border-line-2 text-muted-foreground-1 hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                    <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"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
                                  </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-11 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-wccmdid8">
                                    <div class="p-1 space-y-0.5">
                                      <button type="button" class="w-full flex items-center gap-x-2 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <svg class="shrink-0 size-3.5" 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="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" x2="12" y1="2" y2="15"/></svg>
                                        Share
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-2 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <svg class="shrink-0 size-3.5" 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"><circle cx="12" cy="12" r="10"/><path d="m4.9 4.9 14.2 14.2"/></svg>
                                        Block user
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-2 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <svg class="shrink-0 size-3.5" 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="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                                        Delete
                                      </button>
                                    </div>
                                  </div>
                                  
                                </div>
                                
                              </div>
                              
                            </div>
                          </div>
                        </div>

<div class="p-4 h-full">
                          <h2 class="mb-2 font-medium text-foreground">
                            Ols Schols
                          </h2>

<div class="mt-3 flex flex-wrap gap-1">
                            <span class="py-1 px-2.5 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground">
                              Designer
                            </span>
                            <span class="py-1 px-2.5 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground">
                              Mobile
                            </span>
                            <span class="py-1 px-2.5 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground">
                              Web
                            </span>
                            <span class="py-1 px-2.5 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground">
                              Tool
                            </span>
                          </div>
                          
                        </div>
                        
  
                        <div class="py-3 px-4 flex items-center gap-x-3 border-t border-card-footer">
                          <button type="button" class="w-full py-2 px-2.5 inline-flex justify-center items-center gap-x-1.5 text-[13px] font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                            <svg class="shrink-0 size-3.5" 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="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/><path d="M8 12h.01"/><path d="M12 12h.01"/><path d="M16 12h.01"/></svg>
                            Contact
                          </button>
                          <a class="w-full flex justify-center items-center gap-x-1.5 py-2 px-2.5 font-medium text-[13px] bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover rounded-md disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus" href="../../../templates/productivity/work-management/talent-details.html">
                            View profile
                            <svg class="shrink-0 size-3.5" 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="M7 7h10v10"/><path d="M7 17 17 7"/></svg>
                          </a>
                        </div>
                      </div>
                      
  
                      
                      <div class="flex flex-col bg-card border border-card-line rounded-xl">
                        <figure class="shrink-0 relative h-24 overflow-hidden rounded-t-xl">
                          <svg class="w-full h-24 rounded-t-xl" preserveAspectRatio="xMidYMid slice" width="576" height="120" viewBox="0 0 576 120" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_666_273469a21332)"><rect width="576" height="120" fill="#B2E7FE"/><rect x="289.678" y="-90.3" width="102.634" height="391.586" transform="rotate(59.5798 289.678 -90.3)" fill="#FF8F5D"/><rect x="41.3926" y="-0.996094" width="102.634" height="209.864" transform="rotate(-31.6412 41.3926 -0.996094)" fill="#3ECEED"/><rect x="66.9512" y="40.4817" width="102.634" height="104.844" transform="rotate(-31.6412 66.9512 40.4817)" fill="#4C48FF"/></g><defs><clipPath id="clip0_666_273469a21332"><rect width="576" height="120" fill="white"/></clipPath></defs></svg>
                        </figure>

<div class="-mt-8 px-4 mb-3">
                          <div class="relative flex items-center gap-x-3">
                            <div class="relative w-20">
                              <img class="shrink-0 size-20 ring-4 ring-card rounded-3xl" src="https://images.unsplash.com/photo-1601935111741-ae98b2b230b0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
                              <div class="absolute -bottom-3 inset-x-0 text-center">
                                <span class="py-1 px-2 inline-flex items-center gap-x-1 text-xs font-semibold uppercase rounded-md bg-linear-to-tr from-lime-500 to-teal-500 text-foreground-inverse">Pro</span>
                              </div>
                            </div>
      
                            <div class="absolute bottom-2 inset-e-0">
                              
                              <div class="h-full flex justify-end items-end gap-x-2">
                                
                                <button type="button" class="hs-tooltip flex justify-center items-center gap-x-3 size-8 text-sm border border-line-2 text-muted-foreground-1 hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                  <svg class="shrink-0 size-3.5" 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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                                  <span class="sr-only">Add to favorites</span>
                                  <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                    Add to favorites
                                  </span>
                                </button>

<div class="hs-dropdown [--strategy:absolute] [--placement:bottom-right] relative inline-flex">
                                  <button id="hs-pro-wccmdid9" type="button" class="flex justify-center items-center gap-x-3 size-8 text-sm border border-line-2 text-muted-foreground-1 hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                    <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"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
                                  </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-11 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-wccmdid9">
                                    <div class="p-1 space-y-0.5">
                                      <button type="button" class="w-full flex items-center gap-x-2 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <svg class="shrink-0 size-3.5" 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="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" x2="12" y1="2" y2="15"/></svg>
                                        Share
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-2 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <svg class="shrink-0 size-3.5" 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"><circle cx="12" cy="12" r="10"/><path d="m4.9 4.9 14.2 14.2"/></svg>
                                        Block user
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-2 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <svg class="shrink-0 size-3.5" 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="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                                        Delete
                                      </button>
                                    </div>
                                  </div>
                                  
                                </div>
                                
                              </div>
                              
                            </div>
                          </div>
                        </div>

<div class="mt-3 flex flex-wrap gap-1">
                            <span class="py-1 px-2.5 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground">
                              Designer
                            </span>
                            <span class="py-1 px-2.5 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground">
                              Front-End
                            </span>
                            <span class="py-1 px-2.5 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground">
                              Brand Designer
                            </span>
                            <span class="py-1 px-2.5 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground">
                              Tool
                            </span>
                            <div class="hs-dropdown [--trigger:hover] inline-block">
                              <button id="hs-pro-wcctdid9" type="button" class="py-1 px-2.5 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground cursor-pointer" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                +2
                              </button>
                              <div class="hs-dropdown-menu hs-dropdown-open:opacity-100 max-w-64 transition-[opacity,margin] duration opacity-0 hidden overflow-hidden z-10 p-2 bg-dropdown border border-dropdown-line shadow-xl rounded-lg" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-wcctdid9">
                                <span class="py-1 px-2.5 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground">
                                  Web
                                </span>
                                <span class="py-1 px-2.5 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground">
                                  UI/UX
                                </span>
                              </div>
                            </div>
                          </div>
                          
                        </div>
                        
  
                        <div class="py-3 px-4 flex items-center gap-x-3 border-t border-card-footer">
                          <button type="button" class="w-full py-2 px-2.5 inline-flex justify-center items-center gap-x-1.5 text-[13px] font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                            <svg class="shrink-0 size-3.5" 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="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/><path d="M8 12h.01"/><path d="M12 12h.01"/><path d="M16 12h.01"/></svg>
                            Contact
                          </button>
                          <a class="w-full flex justify-center items-center gap-x-1.5 py-2 px-2.5 font-medium text-[13px] bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover rounded-md disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus" href="../../../templates/productivity/work-management/talent-details.html">
                            View profile
                            <svg class="shrink-0 size-3.5" 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="M7 7h10v10"/><path d="M7 17 17 7"/></svg>
                          </a>
                        </div>
                      </div>
                      
                    </div>

Open related talents page

Team & Profile Views

Team Membership Card List Pro

Profile Card Grid with Cover Images Pro