Tailwind CSS Connections & Selectors Blocks

All Blocks
Application UI
Communication
Connections & Selectors

Connections & Selectors

Connection patterns for profile networks, people pickers, and avatar-based selector lists.

Profile Connection Grid with Status Badges Pro

Profile connection grid arranges member cards with avatar states, company labels, connection counts, and follow actions.

<div class="flex flex-col bg-card border border-card-line rounded-xl">
    
    <div class="p-3 md:pt-5 md:px-5 grid grid-cols-3 gap-x-2">
      <div>
        <span class="hidden md:inline-flex items-center gap-x-1.5 py-1 px-2.5 text-xs font-medium bg-surface text-surface-foreground rounded-full">
          <span class="size-1.5 shrink-0 inline-block bg-secondary rounded-full"></span>
          Online
        </span>
      </div>

<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] 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 mt-0.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="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg>
                Share connection
              </button>
              <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] 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 mt-0.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="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/></svg>
                Hide connection
              </button>
            </div>
          </div>
          
        </div>
        
      </div>
    </div>

<div class="p-3 pt-0 md:px-5 md:pb-5 text-center">
      <h3 class="md:text-lg font-medium text-foreground">
        Anna Richard
      </h3>

<div class="inline-flex justify-center items-center gap-x-2">
        <svg class="shrink-0 size-4 text-muted-foreground-1" 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="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"/><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/><path d="M10 6h4"/><path d="M10 10h4"/><path d="M10 14h4"/><path d="M10 18h4"/></svg>
        <p class="text-sm text-muted-foreground-1">
          Guideline
        </p>
      </div>
    </div>

<div class="py-3 px-5 flex flex-col sm:flex-row sm:justify-between sm:items-center gap-y-1 sm:gap-y-0 gap-x-2 text-center sm:text-start border-t border-card-footer">
      <div>
        <p class="text-sm text-muted-foreground-1">
          57 connections
        </p>
      </div>
      <div>
        <label for="hs-pro-dupccn1" class="relative py-2 px-3 flex items-center justify-center sm:justify-start bg-layer border border-layer-line cursor-pointer font-medium text-xs rounded-lg peer-checked:bg-layer-hover hover:border-line-3 focus:outline-none focus:border-line-3">
          <input type="checkbox" id="hs-pro-dupccn1" class="peer hidden" checked>
          <span class="relative z-10 text-layer-foreground peer-checked:hidden">
            Connect
          </span>
          <span class="relative z-10 hidden peer-checked:flex items-center gap-x-1.5 text-layer-foreground">
            <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="M20 6 9 17l-5-5"/></svg>
            Connected
          </span>
        </label>
      </div>
    </div>
    
  </div>

<div class="flex flex-col bg-card border border-card-line rounded-xl">
    
    <div class="p-3 md:pt-5 md:px-5 grid grid-cols-3 gap-x-2">
      <div>
        <span class="hidden md:inline-flex items-center gap-x-1.5 py-1 px-2.5 text-xs font-medium bg-red-100 text-red-800 rounded-full dark:bg-red-500/10 dark:text-red-500">
          <span class="size-1.5 shrink-0 inline-block bg-red-800 rounded-full dark:bg-red-500"></span>
          Unavailable
        </span>
      </div>

<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] 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 mt-0.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="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg>
                Share connection
              </button>
              <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] 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 mt-0.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="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/></svg>
                Hide connection
              </button>
            </div>
          </div>
          
        </div>
        
      </div>
    </div>

<div class="p-3 pt-0 md:px-5 md:pb-5 text-center">
      <h3 class="md:text-lg font-medium text-foreground">
        Rachel Doe
      </h3>

<div class="inline-flex justify-center items-center gap-x-2">
        <svg class="shrink-0 size-4 text-muted-foreground-1" 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="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"/><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/><path d="M10 6h4"/><path d="M10 10h4"/><path d="M10 14h4"/><path d="M10 18h4"/></svg>
        <p class="text-sm text-muted-foreground-1">
          FrontApp
        </p>
      </div>
    </div>

<div class="py-3 px-5 flex flex-col sm:flex-row sm:justify-between sm:items-center gap-y-1 sm:gap-y-0 gap-x-2 text-center sm:text-start border-t border-card-footer">
      <div>
        <p class="text-sm text-muted-foreground-1">
          24 connections
        </p>
      </div>
      <div>
        <label for="hs-pro-dupccn2" class="relative py-2 px-3 flex items-center justify-center sm:justify-start bg-layer border border-layer-line cursor-pointer font-medium text-xs rounded-lg peer-checked:bg-layer-hover hover:border-line-3 focus:outline-none focus:border-line-3">
          <input type="checkbox" id="hs-pro-dupccn2" class="peer hidden" checked>
          <span class="relative z-10 text-layer-foreground peer-checked:hidden">
            Connect
          </span>
          <span class="relative z-10 hidden peer-checked:flex items-center gap-x-1.5 text-layer-foreground">
            <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="M20 6 9 17l-5-5"/></svg>
            Connected
          </span>
        </label>
      </div>
    </div>
    
  </div>

<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] 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 mt-0.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="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg>
                Share connection
              </button>
              <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] 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 mt-0.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="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/></svg>
                Hide connection
              </button>
            </div>
          </div>
          
        </div>
        
      </div>
    </div>

<div class="p-3 pt-0 md:px-5 md:pb-5 text-center">
      <h3 class="md:text-lg font-medium text-foreground">
        Daniel Hobbs
      </h3>

<div class="inline-flex justify-center items-center gap-x-2">
        <svg class="shrink-0 size-4 text-muted-foreground-1" 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="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"/><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/><path d="M10 6h4"/><path d="M10 10h4"/><path d="M10 14h4"/><path d="M10 18h4"/></svg>
        <p class="text-sm text-muted-foreground-1">
          Unassigned
        </p>
      </div>
    </div>

<div class="py-3 px-5 flex flex-col sm:flex-row sm:justify-between sm:items-center gap-y-1 sm:gap-y-0 gap-x-2 text-center sm:text-start border-t border-card-footer">
      <div>
        <p class="text-sm text-muted-foreground-1">
          156 connections
        </p>
      </div>
      <div>
        <label for="hs-pro-dupccn3" class="relative py-2 px-3 flex items-center justify-center sm:justify-start bg-layer border border-layer-line cursor-pointer font-medium text-xs rounded-lg peer-checked:bg-layer-hover hover:border-line-3 focus:outline-none focus:border-line-3">
          <input type="checkbox" id="hs-pro-dupccn3" class="peer hidden" >
          <span class="relative z-10 text-layer-foreground peer-checked:hidden">
            Connect
          </span>
          <span class="relative z-10 hidden peer-checked:flex items-center gap-x-1.5 text-layer-foreground">
            <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="M20 6 9 17l-5-5"/></svg>
            Connected
          </span>
        </label>
      </div>
    </div>
    
  </div>

<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] 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 mt-0.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="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg>
                Share connection
              </button>
              <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] 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 mt-0.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="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/></svg>
                Hide connection
              </button>
            </div>
          </div>
          
        </div>
        
      </div>
    </div>

<div class="p-3 pt-0 md:px-5 md:pb-5 text-center">
      <h3 class="md:text-lg font-medium text-foreground">
        Maria Colbert
      </h3>

<div class="inline-flex justify-center items-center gap-x-2">
        <svg class="shrink-0 size-4 text-muted-foreground-1" 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="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"/><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/><path d="M10 6h4"/><path d="M10 10h4"/><path d="M10 14h4"/><path d="M10 18h4"/></svg>
        <p class="text-sm text-muted-foreground-1">
          Prosperops
        </p>
      </div>
    </div>

<div class="py-3 px-5 flex flex-col sm:flex-row sm:justify-between sm:items-center gap-y-1 sm:gap-y-0 gap-x-2 text-center sm:text-start border-t border-card-footer">
      <div>
        <p class="text-sm text-muted-foreground-1">
          3 connections
        </p>
      </div>
      <div>
        <label for="hs-pro-dupccn4" class="relative py-2 px-3 flex items-center justify-center sm:justify-start bg-layer border border-layer-line cursor-pointer font-medium text-xs rounded-lg peer-checked:bg-layer-hover hover:border-line-3 focus:outline-none focus:border-line-3">
          <input type="checkbox" id="hs-pro-dupccn4" class="peer hidden" >
          <span class="relative z-10 text-layer-foreground peer-checked:hidden">
            Connect
          </span>
          <span class="relative z-10 hidden peer-checked:flex items-center gap-x-1.5 text-layer-foreground">
            <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="M20 6 9 17l-5-5"/></svg>
            Connected
          </span>
        </label>
      </div>
    </div>
    
  </div>

<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] 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 mt-0.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="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg>
                Share connection
              </button>
              <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] 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 mt-0.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="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/></svg>
                Hide connection
              </button>
            </div>
          </div>
          
        </div>
        
      </div>
    </div>

<div class="p-3 pt-0 md:px-5 md:pb-5 text-center">
      <h3 class="md:text-lg font-medium text-foreground">
        Alex Gustuf
      </h3>

<div class="inline-flex justify-center items-center gap-x-2">
        <svg class="shrink-0 size-4 text-muted-foreground-1" 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="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"/><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/><path d="M10 6h4"/><path d="M10 10h4"/><path d="M10 14h4"/><path d="M10 18h4"/></svg>
        <p class="text-sm text-muted-foreground-1">
          Notion
        </p>
      </div>
    </div>

<div class="py-3 px-5 flex flex-col sm:flex-row sm:justify-between sm:items-center gap-y-1 sm:gap-y-0 gap-x-2 text-center sm:text-start border-t border-card-footer">
      <div>
        <p class="text-sm text-muted-foreground-1">
          0 connections
        </p>
      </div>
      <div>
        <label for="hs-pro-dupccn5" class="relative py-2 px-3 flex items-center justify-center sm:justify-start bg-layer border border-layer-line cursor-pointer font-medium text-xs rounded-lg peer-checked:bg-layer-hover hover:border-line-3 focus:outline-none focus:border-line-3">
          <input type="checkbox" id="hs-pro-dupccn5" class="peer hidden" >
          <span class="relative z-10 text-layer-foreground peer-checked:hidden">
            Connect
          </span>
          <span class="relative z-10 hidden peer-checked:flex items-center gap-x-1.5 text-layer-foreground">
            <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="M20 6 9 17l-5-5"/></svg>
            Connected
          </span>
        </label>
      </div>
    </div>
    
  </div>

<div class="flex flex-col bg-card border border-card-line rounded-xl">
    
    <div class="p-3 md:pt-5 md:px-5 grid grid-cols-3 gap-x-2">
      <div>
        <span class="hidden md:inline-flex items-center gap-x-1.5 py-1 px-2.5 text-xs font-medium bg-red-100 text-red-800 rounded-full dark:bg-red-500/10 dark:text-red-500">
          <span class="size-1.5 shrink-0 inline-block bg-red-800 rounded-full dark:bg-red-500"></span>
          Unavailable
        </span>
      </div>

<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] 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 mt-0.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="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg>
                Share connection
              </button>
              <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] 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 mt-0.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="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/></svg>
                Hide connection
              </button>
            </div>
          </div>
          
        </div>
        
      </div>
    </div>

<div class="p-3 pt-0 md:px-5 md:pb-5 text-center">
      <h3 class="md:text-lg font-medium text-foreground">
        Bob Dean
      </h3>

<div class="inline-flex justify-center items-center gap-x-2">
        <svg class="shrink-0 size-4 text-muted-foreground-1" 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="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"/><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/><path d="M10 6h4"/><path d="M10 10h4"/><path d="M10 14h4"/><path d="M10 18h4"/></svg>
        <p class="text-sm text-muted-foreground-1">
          Atlassian
        </p>
      </div>
    </div>

<div class="py-3 px-5 flex flex-col sm:flex-row sm:justify-between sm:items-center gap-y-1 sm:gap-y-0 gap-x-2 text-center sm:text-start border-t border-card-footer">
      <div>
        <p class="text-sm text-muted-foreground-1">
          5 connections
        </p>
      </div>
      <div>
        <label for="hs-pro-dupccn6" class="relative py-2 px-3 flex items-center justify-center sm:justify-start bg-layer border border-layer-line cursor-pointer font-medium text-xs rounded-lg peer-checked:bg-layer-hover hover:border-line-3 focus:outline-none focus:border-line-3">
          <input type="checkbox" id="hs-pro-dupccn6" class="peer hidden" >
          <span class="relative z-10 text-layer-foreground peer-checked:hidden">
            Connect
          </span>
          <span class="relative z-10 hidden peer-checked:flex items-center gap-x-1.5 text-layer-foreground">
            <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="M20 6 9 17l-5-5"/></svg>
            Connected
          </span>
        </label>
      </div>
    </div>
    
  </div>

<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] 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 mt-0.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="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg>
                Share connection
              </button>
              <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] 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 mt-0.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="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/></svg>
                Hide connection
              </button>
            </div>
          </div>
          
        </div>
        
      </div>
    </div>

<div class="p-3 pt-0 md:px-5 md:pb-5 text-center">
      <h3 class="md:text-lg font-medium text-foreground">
        Liza Harrison
      </h3>

<div class="inline-flex justify-center items-center gap-x-2">
        <svg class="shrink-0 size-4 text-muted-foreground-1" 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="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"/><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/><path d="M10 6h4"/><path d="M10 10h4"/><path d="M10 14h4"/><path d="M10 18h4"/></svg>
        <p class="text-sm text-muted-foreground-1">
          Atlassian
        </p>
      </div>
    </div>

<div class="py-3 px-5 flex flex-col sm:flex-row sm:justify-between sm:items-center gap-y-1 sm:gap-y-0 gap-x-2 text-center sm:text-start border-t border-card-footer">
      <div>
        <p class="text-sm text-muted-foreground-1">
          5 connections
        </p>
      </div>
      <div>
        <label for="hs-pro-dupccn7" class="relative py-2 px-3 flex items-center justify-center sm:justify-start bg-layer border border-layer-line cursor-pointer font-medium text-xs rounded-lg peer-checked:bg-layer-hover hover:border-line-3 focus:outline-none focus:border-line-3">
          <input type="checkbox" id="hs-pro-dupccn7" class="peer hidden" >
          <span class="relative z-10 text-layer-foreground peer-checked:hidden">
            Connect
          </span>
          <span class="relative z-10 hidden peer-checked:flex items-center gap-x-1.5 text-layer-foreground">
            <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="M20 6 9 17l-5-5"/></svg>
            Connected
          </span>
        </label>
      </div>
    </div>
    
  </div>

<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] 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 mt-0.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="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg>
                Share connection
              </button>
              <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] 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 mt-0.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="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/></svg>
                Hide connection
              </button>
            </div>
          </div>
          
        </div>
        
      </div>
    </div>

<div class="p-3 pt-0 md:px-5 md:pb-5 text-center">
      <h3 class="md:text-lg font-medium text-foreground">
        Ols Schols
      </h3>

<div class="inline-flex justify-center items-center gap-x-2">
        <svg class="shrink-0 size-4 text-muted-foreground-1" 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="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"/><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/><path d="M10 6h4"/><path d="M10 10h4"/><path d="M10 14h4"/><path d="M10 18h4"/></svg>
        <p class="text-sm text-muted-foreground-1">
          Guaideline
        </p>
      </div>
    </div>

<div class="py-3 px-5 flex flex-col sm:flex-row sm:justify-between sm:items-center gap-y-1 sm:gap-y-0 gap-x-2 text-center sm:text-start border-t border-card-footer">
      <div>
        <p class="text-sm text-muted-foreground-1">
          9 connections
        </p>
      </div>
      <div>
        <label for="hs-pro-dupccn8" class="relative py-2 px-3 flex items-center justify-center sm:justify-start bg-layer border border-layer-line cursor-pointer font-medium text-xs rounded-lg peer-checked:bg-layer-hover hover:border-line-3 focus:outline-none focus:border-line-3">
          <input type="checkbox" id="hs-pro-dupccn8" class="peer hidden" checked>
          <span class="relative z-10 text-layer-foreground peer-checked:hidden">
            Connect
          </span>
          <span class="relative z-10 hidden peer-checked:flex items-center gap-x-1.5 text-layer-foreground">
            <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="M20 6 9 17l-5-5"/></svg>
            Connected
          </span>
        </label>
      </div>
    </div>
    
  </div>

<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-dupc9">
            <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] 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 mt-0.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="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg>
                Share connection
              </button>
              <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] 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 mt-0.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="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/></svg>
                Hide connection
              </button>
            </div>
          </div>
          
        </div>
        
      </div>
    </div>

<div class="p-3 pt-0 md:px-5 md:pb-5 text-center">
      <h3 class="md:text-lg font-medium text-foreground">
        Ella Lauda
      </h3>

<div class="inline-flex justify-center items-center gap-x-2">
        <svg class="shrink-0 size-4 text-muted-foreground-1" 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="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"/><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/><path d="M10 6h4"/><path d="M10 10h4"/><path d="M10 14h4"/><path d="M10 18h4"/></svg>
        <p class="text-sm text-muted-foreground-1">
          Notion
        </p>
      </div>
    </div>

<div class="py-3 px-5 flex flex-col sm:flex-row sm:justify-between sm:items-center gap-y-1 sm:gap-y-0 gap-x-2 text-center sm:text-start border-t border-card-footer">
      <div>
        <p class="text-sm text-muted-foreground-1">
          11 connections
        </p>
      </div>
      <div>
        <label for="hs-pro-dupccn9" class="relative py-2 px-3 flex items-center justify-center sm:justify-start bg-layer border border-layer-line cursor-pointer font-medium text-xs rounded-lg peer-checked:bg-layer-hover hover:border-line-3 focus:outline-none focus:border-line-3">
          <input type="checkbox" id="hs-pro-dupccn9" class="peer hidden" checked>
          <span class="relative z-10 text-layer-foreground peer-checked:hidden">
            Connect
          </span>
          <span class="relative z-10 hidden peer-checked:flex items-center gap-x-1.5 text-layer-foreground">
            <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="M20 6 9 17l-5-5"/></svg>
            Connected
          </span>
        </label>
      </div>
    </div>
    
  </div>

Profile Connection List with Action Buttons Pro

Profile connection list stacks member rows with avatars, usernames, and inline connect or unconnect actions.

<div class="space-y-3">
  
  <div class="p-4 flex flex-col bg-card border border-card-line rounded-xl">
    <div class="relative sm:flex sm:justify-between sm:gap-x-4">
      <div>
        
        <div class="flex items-center gap-x-4">
          <div class="relative shrink-0">
            <img class="shrink-0 size-9.5 sm:w-11.5 sm:h-11.5 mx-auto 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="absolute bottom-0 inset-e-0 block md:hidden size-3 rounded-full bg-teal-600 border-2 border-card dark:bg-teal-500"></span>
          </div>

<div class="grow flex flex-col">
            <div class="inline-flex items-center gap-x-2">
              <p class="font-medium text-foreground">
                Anna Richard
              </p>
              <span class="hidden md:inline-flex items-center gap-x-1.5 py-1 px-2.5 text-xs font-medium bg-surface text-surface-foreground rounded-full">
                <span class="size-1.5 inline-block bg-secondary rounded-full"></span>
                Online
              </span>
            </div>
          
            <div class="inline-flex items-center gap-x-2">
              <svg class="shrink-0 size-3 sm:size-3.5 text-muted-foreground-1" 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="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"/><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/><path d="M10 6h4"/><path d="M10 10h4"/><path d="M10 14h4"/><path d="M10 18h4"/></svg>
              <p class="text-xs sm:text-sm text-muted-foreground-1">
                Guideline
              </p>
            </div>
          </div>
          
        </div>
        
      </div>

<div class="mt-2 sm:mt-0">
        <div class="flex justify-end items-center gap-x-4">
          <div class="whitespace-nowrap">
            <p class="text-xs sm:text-sm text-muted-foreground-1">
              57 connections
            </p>
          </div>

<label for="hs-pro-dupccn1" class="relative py-2 px-3 flex items-center justify-center sm:justify-start border border-layer-line cursor-pointer font-medium text-xs rounded-lg peer-checked:bg-layer-hover hover:border-line-3 focus:outline-none focus:border-line-3">
            <input type="checkbox" id="hs-pro-dupccn1" class="peer hidden" checked>
            <span class="relative z-10 text-layer-foreground peer-checked:hidden">
              Connect
            </span>
            <span class="relative z-10 hidden peer-checked:flex items-center gap-x-1.5 text-layer-foreground">
              <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="M20 6 9 17l-5-5"/></svg>
              Connected
            </span>
          </label>

<div class="absolute top-0 inset-e-0 sm:static">
            <div class="hs-dropdown [--placement:bottom-right] relative inline-flex">
              <button id="hs-pro-dupc1" type="button" class="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-20 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] 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 mt-0.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="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg>
                    Share connection
                  </button>
                  <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] 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 mt-0.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="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/></svg>
                    Hide connection
                  </button>
                </div>
              </div>
              
            </div>
            
          </div>
        </div>
      </div>
      
    </div>
  </div>

<div class="p-4 flex flex-col bg-card border border-card-line rounded-xl">
    <div class="relative sm:flex sm:justify-between sm:gap-x-4">
      <div>
        
        <div class="flex items-center gap-x-4">
          <div class="relative">
            <span class="flex shrink-0 justify-center items-center size-9.5 sm:w-11.5 sm:h-11.5 mx-auto bg-layer border border-layer-line text-layer-foreground text-sm sm:text-base font-medium uppercase rounded-full">
              Rd
              <span class="absolute bottom-0 inset-e-0 block md:hidden size-3 rounded-full bg-red-600 border-2 border-card dark:bg-red-500"></span>
            </span>
          </div>

<div class="grow flex flex-col">
            <div class="inline-flex items-center gap-x-2">
              <p class="font-medium text-foreground">
                Rachel Doe
              </p>
              <span class="hidden md:inline-flex items-center gap-x-1.5 py-1 px-2.5 text-xs font-medium bg-red-100 text-red-800 rounded-full dark:bg-red-500/10 dark:text-red-500">
                <span class="size-1.5 inline-block bg-red-800 rounded-full dark:bg-red-500"></span>
                Unavailable
              </span>
            </div>
          
            <div class="inline-flex items-center gap-x-2">
              <svg class="shrink-0 size-3 sm:size-3.5 text-muted-foreground-1" 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="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"/><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/><path d="M10 6h4"/><path d="M10 10h4"/><path d="M10 14h4"/><path d="M10 18h4"/></svg>
              <p class="text-xs sm:text-sm text-muted-foreground-1">
                FrontApp
              </p>
            </div>
          </div>
          
        </div>
        
      </div>

<label for="hs-pro-dupccn2" class="relative py-2 px-3 flex items-center justify-center sm:justify-start border border-layer-line cursor-pointer font-medium text-xs rounded-lg peer-checked:bg-layer-hover hover:border-line-3 focus:outline-none focus:border-line-3">
            <input type="checkbox" id="hs-pro-dupccn2" class="peer hidden" checked>
            <span class="relative z-10 text-layer-foreground peer-checked:hidden">
              Connect
            </span>
            <span class="relative z-10 hidden peer-checked:flex items-center gap-x-1.5 text-layer-foreground">
              <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="M20 6 9 17l-5-5"/></svg>
              Connected
            </span>
          </label>

<div class="absolute top-0 inset-e-0 sm:static">
            <div class="hs-dropdown [--placement:bottom-right] relative inline-flex">
              <button id="hs-pro-dupc2" type="button" class="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-20 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] 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 mt-0.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="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg>
                    Share connection
                  </button>
                  <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] 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 mt-0.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="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/></svg>
                    Hide connection
                  </button>
                </div>
              </div>
              
            </div>
            
          </div>
        </div>
      </div>
      
    </div>
  </div>

<div class="p-4 flex flex-col bg-card border border-card-line rounded-xl">
    <div class="relative sm:flex sm:justify-between sm:gap-x-4">
      <div>
        
        <div class="flex items-center gap-x-4">
          <div class="relative shrink-0">
            <img class="shrink-0 size-9.5 sm:w-11.5 sm:h-11.5 mx-auto rounded-full" src="https://images.unsplash.com/photo-1601935111741-ae98b2b230b0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
            <span class="absolute bottom-0 inset-e-0 block md:hidden size-3 rounded-full bg-teal-600 border-2 border-card dark:bg-teal-500"></span>
          </div>

<div class="grow flex flex-col">
            <div class="inline-flex items-center gap-x-2">
              <p class="font-medium text-foreground">
                Daniel Hobbs
              </p>
              <span class="hidden md:inline-flex items-center gap-x-1.5 py-1 px-2.5 text-xs font-medium bg-surface text-surface-foreground rounded-full">
                <span class="size-1.5 inline-block bg-secondary rounded-full"></span>
                Online
              </span>
            </div>
          
            <div class="inline-flex items-center gap-x-2">
              <svg class="shrink-0 size-3 sm:size-3.5 text-muted-foreground-1" 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="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"/><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/><path d="M10 6h4"/><path d="M10 10h4"/><path d="M10 14h4"/><path d="M10 18h4"/></svg>
              <p class="text-xs sm:text-sm text-muted-foreground-1">
                Unassigned
              </p>
            </div>
          </div>
          
        </div>
        
      </div>

<label for="hs-pro-dupccn3" class="relative py-2 px-3 flex items-center justify-center sm:justify-start border border-layer-line cursor-pointer font-medium text-xs rounded-lg peer-checked:bg-layer-hover hover:border-line-3 focus:outline-none focus:border-line-3">
            <input type="checkbox" id="hs-pro-dupccn3" class="peer hidden" >
            <span class="relative z-10 text-layer-foreground peer-checked:hidden">
              Connect
            </span>
            <span class="relative z-10 hidden peer-checked:flex items-center gap-x-1.5 text-layer-foreground">
              <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="M20 6 9 17l-5-5"/></svg>
              Connected
            </span>
          </label>

<div class="absolute top-0 inset-e-0 sm:static">
            <div class="hs-dropdown [--placement:bottom-right] relative inline-flex">
              <button id="hs-pro-dupc3" type="button" class="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-20 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] 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 mt-0.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="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg>
                    Share connection
                  </button>
                  <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] 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 mt-0.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="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/></svg>
                    Hide connection
                  </button>
                </div>
              </div>
              
            </div>
            
          </div>
        </div>
      </div>
      
    </div>
  </div>

<div class="p-4 flex flex-col bg-card border border-card-line rounded-xl">
    <div class="relative sm:flex sm:justify-between sm:gap-x-4">
      <div>
        
        <div class="flex items-center gap-x-4">
          <div class="relative shrink-0">
            <img class="shrink-0 size-9.5 sm:w-11.5 sm:h-11.5 mx-auto rounded-full" src="https://images.unsplash.com/photo-1568048689711-5e0325cea8c0?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="grow flex flex-col">
            <div class="inline-flex items-center gap-x-2">
              <p class="font-medium text-foreground">
                Maria Colbert
              </p>
            </div>
          
            <div class="inline-flex items-center gap-x-2">
              <svg class="shrink-0 size-3 sm:size-3.5 text-muted-foreground-1" 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="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"/><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/><path d="M10 6h4"/><path d="M10 10h4"/><path d="M10 14h4"/><path d="M10 18h4"/></svg>
              <p class="text-xs sm:text-sm text-muted-foreground-1">
                Prosperops
              </p>
            </div>
          </div>
          
        </div>
        
      </div>

<label for="hs-pro-dupccn4" class="relative py-2 px-3 flex items-center justify-center sm:justify-start border border-layer-line cursor-pointer font-medium text-xs rounded-lg peer-checked:bg-layer-hover hover:border-line-3 focus:outline-none focus:border-line-3">
            <input type="checkbox" id="hs-pro-dupccn4" class="peer hidden" >
            <span class="relative z-10 text-layer-foreground peer-checked:hidden">
              Connect
            </span>
            <span class="relative z-10 hidden peer-checked:flex items-center gap-x-1.5 text-layer-foreground">
              <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="M20 6 9 17l-5-5"/></svg>
              Connected
            </span>
          </label>

<div class="absolute top-0 inset-e-0 sm:static">
            <div class="hs-dropdown [--placement:bottom-right] relative inline-flex">
              <button id="hs-pro-dupc4" type="button" class="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-20 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] 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 mt-0.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="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg>
                    Share connection
                  </button>
                  <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] 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 mt-0.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="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/></svg>
                    Hide connection
                  </button>
                </div>
              </div>
              
            </div>
            
          </div>
        </div>
      </div>
      
    </div>
  </div>

<div class="p-4 flex flex-col bg-card border border-card-line rounded-xl">
    <div class="relative sm:flex sm:justify-between sm:gap-x-4">
      <div>
        
        <div class="flex items-center gap-x-4">
          <div class="relative shrink-0">
            <img class="shrink-0 size-9.5 sm:w-11.5 sm:h-11.5 mx-auto 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">
          </div>

<div class="grow flex flex-col">
            <div class="inline-flex items-center gap-x-2">
              <p class="font-medium text-foreground">
                Alex Gustuf
              </p>
            </div>
          
            <div class="inline-flex items-center gap-x-2">
              <svg class="shrink-0 size-3 sm:size-3.5 text-muted-foreground-1" 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="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"/><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/><path d="M10 6h4"/><path d="M10 10h4"/><path d="M10 14h4"/><path d="M10 18h4"/></svg>
              <p class="text-xs sm:text-sm text-muted-foreground-1">
                Notion
              </p>
            </div>
          </div>
          
        </div>
        
      </div>

<label for="hs-pro-dupccn5" class="relative py-2 px-3 flex items-center justify-center sm:justify-start border border-layer-line cursor-pointer font-medium text-xs rounded-lg peer-checked:bg-layer-hover hover:border-line-3 focus:outline-none focus:border-line-3">
            <input type="checkbox" id="hs-pro-dupccn5" class="peer hidden" >
            <span class="relative z-10 text-layer-foreground peer-checked:hidden">
              Connect
            </span>
            <span class="relative z-10 hidden peer-checked:flex items-center gap-x-1.5 text-layer-foreground">
              <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="M20 6 9 17l-5-5"/></svg>
              Connected
            </span>
          </label>

<div class="absolute top-0 inset-e-0 sm:static">
            <div class="hs-dropdown [--placement:bottom-right] relative inline-flex">
              <button id="hs-pro-dupc5" type="button" class="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-20 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] 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 mt-0.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="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg>
                    Share connection
                  </button>
                  <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] 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 mt-0.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="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/></svg>
                    Hide connection
                  </button>
                </div>
              </div>
              
            </div>
            
          </div>
        </div>
      </div>
      
    </div>
  </div>

<div class="p-4 flex flex-col bg-card border border-card-line rounded-xl">
    <div class="relative sm:flex sm:justify-between sm:gap-x-4">
      <div>
        
        <div class="flex items-center gap-x-4">
          <div class="relative">
            <span class="flex shrink-0 justify-center items-center size-9.5 sm:w-11.5 sm:h-11.5 mx-auto bg-layer border border-layer-line text-layer-foreground text-sm sm:text-base font-medium uppercase rounded-full">
              Bd
              <span class="absolute bottom-0 inset-e-0 block md:hidden size-3 rounded-full bg-red-600 border-2 border-card dark:bg-red-500"></span>
            </span>
          </div>

<div class="grow flex flex-col">
            <div class="inline-flex items-center gap-x-2">
              <p class="font-medium text-foreground">
                Bob Dean
              </p>
              <span class="hidden md:inline-flex items-center gap-x-1.5 py-1 px-2.5 text-xs font-medium bg-red-100 text-red-800 rounded-full dark:bg-red-500/10 dark:text-red-500">
                <span class="size-1.5 inline-block bg-red-800 rounded-full dark:bg-red-500"></span>
                Unavailable
              </span>
            </div>
          
            <div class="inline-flex items-center gap-x-2">
              <svg class="shrink-0 size-3 sm:size-3.5 text-muted-foreground-1" 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="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"/><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/><path d="M10 6h4"/><path d="M10 10h4"/><path d="M10 14h4"/><path d="M10 18h4"/></svg>
              <p class="text-xs sm:text-sm text-muted-foreground-1">
                Atlassian
              </p>
            </div>
          </div>
          
        </div>
        
      </div>

<label for="hs-pro-dupccn6" class="relative py-2 px-3 flex items-center justify-center sm:justify-start border border-layer-line cursor-pointer font-medium text-xs rounded-lg peer-checked:bg-layer-hover hover:border-line-3 focus:outline-none focus:border-line-3">
            <input type="checkbox" id="hs-pro-dupccn6" class="peer hidden" >
            <span class="relative z-10 text-layer-foreground peer-checked:hidden">
              Connect
            </span>
            <span class="relative z-10 hidden peer-checked:flex items-center gap-x-1.5 text-layer-foreground">
              <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="M20 6 9 17l-5-5"/></svg>
              Connected
            </span>
          </label>

<div class="absolute top-0 inset-e-0 sm:static">
            <div class="hs-dropdown [--placement:bottom-right] relative inline-flex">
              <button id="hs-pro-dupc6" type="button" class="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-20 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] 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 mt-0.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="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg>
                    Share connection
                  </button>
                  <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] 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 mt-0.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="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/></svg>
                    Hide connection
                  </button>
                </div>
              </div>
              
            </div>
            
          </div>
        </div>
      </div>
      
    </div>
  </div>

<div class="grow flex flex-col">
            <div class="inline-flex items-center gap-x-2">
              <p class="font-medium text-foreground">
                Liza Harrison
              </p>
            </div>
          
            <div class="inline-flex items-center gap-x-2">
              <svg class="shrink-0 size-3 sm:size-3.5 text-muted-foreground-1" 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="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"/><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/><path d="M10 6h4"/><path d="M10 10h4"/><path d="M10 14h4"/><path d="M10 18h4"/></svg>
              <p class="text-xs sm:text-sm text-muted-foreground-1">
                Atlassian
              </p>
            </div>
          </div>
          
        </div>
        
      </div>

<label for="hs-pro-dupccn7" class="relative py-2 px-3 flex items-center justify-center sm:justify-start border border-layer-line cursor-pointer font-medium text-xs rounded-lg peer-checked:bg-layer-hover hover:border-line-3 focus:outline-none focus:border-line-3">
            <input type="checkbox" id="hs-pro-dupccn7" class="peer hidden" >
            <span class="relative z-10 text-layer-foreground peer-checked:hidden">
              Connect
            </span>
            <span class="relative z-10 hidden peer-checked:flex items-center gap-x-1.5 text-layer-foreground">
              <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="M20 6 9 17l-5-5"/></svg>
              Connected
            </span>
          </label>

<div class="absolute top-0 inset-e-0 sm:static">
            <div class="hs-dropdown [--placement:bottom-right] relative inline-flex">
              <button id="hs-pro-dupc7" type="button" class="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-20 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] 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 mt-0.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="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg>
                    Share connection
                  </button>
                  <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] 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 mt-0.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="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/></svg>
                    Hide connection
                  </button>
                </div>
              </div>
              
            </div>
            
          </div>
        </div>
      </div>
      
    </div>
  </div>

<div class="p-4 flex flex-col bg-card border border-card-line rounded-xl">
    <div class="relative sm:flex sm:justify-between sm:gap-x-4">
      <div>
        
        <div class="flex items-center gap-x-4">
          <div class="relative">
            <span class="flex shrink-0 justify-center items-center size-9.5 sm:w-11.5 sm:h-11.5 mx-auto bg-layer border border-layer-line text-layer-foreground text-sm sm:text-base font-medium uppercase rounded-full">
              Os<span class="absolute bottom-0 inset-e-0 block md:hidden size-3 rounded-full bg-teal-600 border-2 border-card dark:bg-teal-500"></span>
            </span>
          </div>

<div class="grow flex flex-col">
            <div class="inline-flex items-center gap-x-2">
              <p class="font-medium text-foreground">
                Ols Schols
              </p>
              <span class="hidden md:inline-flex items-center gap-x-1.5 py-1 px-2.5 text-xs font-medium bg-surface text-surface-foreground rounded-full">
                <span class="size-1.5 inline-block bg-secondary rounded-full"></span>
                Online
              </span>
            </div>
          
            <div class="inline-flex items-center gap-x-2">
              <svg class="shrink-0 size-3 sm:size-3.5 text-muted-foreground-1" 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="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"/><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/><path d="M10 6h4"/><path d="M10 10h4"/><path d="M10 14h4"/><path d="M10 18h4"/></svg>
              <p class="text-xs sm:text-sm text-muted-foreground-1">
                Guaideline
              </p>
            </div>
          </div>
          
        </div>
        
      </div>

<label for="hs-pro-dupccn8" class="relative py-2 px-3 flex items-center justify-center sm:justify-start border border-layer-line cursor-pointer font-medium text-xs rounded-lg peer-checked:bg-layer-hover hover:border-line-3 focus:outline-none focus:border-line-3">
            <input type="checkbox" id="hs-pro-dupccn8" class="peer hidden" checked>
            <span class="relative z-10 text-layer-foreground peer-checked:hidden">
              Connect
            </span>
            <span class="relative z-10 hidden peer-checked:flex items-center gap-x-1.5 text-layer-foreground">
              <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="M20 6 9 17l-5-5"/></svg>
              Connected
            </span>
          </label>

<div class="absolute top-0 inset-e-0 sm:static">
            <div class="hs-dropdown [--placement:bottom-right] relative inline-flex">
              <button id="hs-pro-dupc8" type="button" class="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-20 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] 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 mt-0.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="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg>
                    Share connection
                  </button>
                  <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] 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 mt-0.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="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/></svg>
                    Hide connection
                  </button>
                </div>
              </div>
              
            </div>
            
          </div>
        </div>
      </div>
      
    </div>
  </div>

<div class="p-4 flex flex-col bg-card border border-card-line rounded-xl">
    <div class="relative sm:flex sm:justify-between sm:gap-x-4">
      <div>
        
        <div class="flex items-center gap-x-4">
          <div class="relative shrink-0">
            <img class="shrink-0 size-9.5 sm:w-11.5 sm:h-11.5 mx-auto 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="absolute bottom-0 inset-e-0 block md:hidden size-3 rounded-full bg-teal-600 border-2 border-card dark:bg-teal-500"></span>
          </div>

<div class="grow flex flex-col">
            <div class="inline-flex items-center gap-x-2">
              <p class="font-medium text-foreground">
                Ella Lauda
              </p>
              <span class="hidden md:inline-flex items-center gap-x-1.5 py-1 px-2.5 text-xs font-medium bg-surface text-surface-foreground rounded-full">
                <span class="size-1.5 inline-block bg-secondary rounded-full"></span>
                Online
              </span>
            </div>
          
            <div class="inline-flex items-center gap-x-2">
              <svg class="shrink-0 size-3 sm:size-3.5 text-muted-foreground-1" 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="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"/><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/><path d="M10 6h4"/><path d="M10 10h4"/><path d="M10 14h4"/><path d="M10 18h4"/></svg>
              <p class="text-xs sm:text-sm text-muted-foreground-1">
                Notion
              </p>
            </div>
          </div>
          
        </div>
        
      </div>

<label for="hs-pro-dupccn9" class="relative py-2 px-3 flex items-center justify-center sm:justify-start border border-layer-line cursor-pointer font-medium text-xs rounded-lg peer-checked:bg-layer-hover hover:border-line-3 focus:outline-none focus:border-line-3">
            <input type="checkbox" id="hs-pro-dupccn9" class="peer hidden" checked>
            <span class="relative z-10 text-layer-foreground peer-checked:hidden">
              Connect
            </span>
            <span class="relative z-10 hidden peer-checked:flex items-center gap-x-1.5 text-layer-foreground">
              <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="M20 6 9 17l-5-5"/></svg>
              Connected
            </span>
          </label>

<div class="absolute top-0 inset-e-0 sm:static">
            <div class="hs-dropdown [--placement:bottom-right] relative inline-flex">
              <button id="hs-pro-dupc9" type="button" class="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-20 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dupc9">
                <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] 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 mt-0.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="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg>
                    Share connection
                  </button>
                  <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] 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 mt-0.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="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/></svg>
                    Hide connection
                  </button>
                </div>
              </div>
              
            </div>
            
          </div>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

Avatar Selector List with Checkbox Buttons Pro

Selectable avatar list pairs initials or photos with usernames and compact checkbox-style connect buttons.

<ul class="space-y-3">
  
  <li>
    <div class="flex items-center gap-x-3">
      <span class="flex shrink-0 justify-center items-center size-9.5 bg-layer border border-layer-line text-layer-foreground text-xs font-medium uppercase rounded-full">
        Rd
      </span>
      <div class="grow">
        <a class="block text-sm font-medium text-foreground hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="../../../templates/dashboards/admin-dashboard/user-profile.html">
          Rachel Doe
        </a>
        <p class="text-xs text-muted-foreground-1">
          rach
        </p>
      </div>
      <label for="hs-pro-dupcu1" class="relative py-1.5 px-2 flex items-center justify-center sm:justify-start bg-layer border border-layer-line cursor-pointer font-medium text-xs text-layer-foreground rounded-lg hover:border-line-3 focus:outline-none">
        <input type="checkbox" id="hs-pro-dupcu1" class="peer hidden">
        <span class="relative z-10 peer-checked:hidden">
          Connect
        </span>
        <span class="relative z-10 hidden peer-checked:flex">
          Unconnect
        </span>
      </label>
    </div>
  </li>

<li>
    <div class="flex items-center gap-x-3">
      <img class="shrink-0 size-9.5 bg-layer border border-layer-line rounded-full" src="https://images.unsplash.com/photo-1670272505340-d906d8d77d03?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
      <div class="grow">
        <a class="block text-sm font-medium text-foreground hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="../../../templates/dashboards/admin-dashboard/user-profile.html">
          Anna Richard
        </a>
        <p class="text-xs text-muted-foreground-1">
          annarich
        </p>
      </div>
      <label for="hs-pro-dupcu2" class="relative py-1.5 px-2 flex items-center justify-center sm:justify-start bg-layer border border-layer-line cursor-pointer font-medium text-xs text-layer-foreground rounded-lg hover:border-line-3 focus:outline-none">
        <input type="checkbox" id="hs-pro-dupcu2" class="peer hidden">
        <span class="relative z-10 peer-checked:hidden">
          Connect
        </span>
        <span class="relative z-10 hidden peer-checked:flex">
          Unconnect
        </span>
      </label>
    </div>
  </li>

<li>
    <div class="flex items-center gap-x-3">
      <span class="flex shrink-0 justify-center items-center size-9.5 bg-layer border border-layer-line text-layer-foreground text-xs font-medium uppercase rounded-full">
        Bd
      </span>
      <div class="grow">
        <a class="block text-sm font-medium text-foreground hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="../../../templates/dashboards/admin-dashboard/user-profile.html">
          Bob Dean
        </a>
        <p class="text-xs text-muted-foreground-1">
          bob_data_viewer
        </p>
      </div>
      <label for="hs-pro-dupcu3" class="relative py-1.5 px-2 flex items-center justify-center sm:justify-start bg-layer border border-layer-line cursor-pointer font-medium text-xs text-layer-foreground rounded-lg hover:border-line-3 focus:outline-none">
        <input type="checkbox" id="hs-pro-dupcu3" class="peer hidden" checked>
        <span class="relative z-10 peer-checked:hidden">
          Connect
        </span>
        <span class="relative z-10 hidden peer-checked:flex">
          Unconnect
        </span>
      </label>
    </div>
  </li>

<li>
    <div class="flex items-center gap-x-3">
      <img class="shrink-0 size-9.5 bg-layer border border-layer-line rounded-full" src="https://images.unsplash.com/photo-1601935111741-ae98b2b230b0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
      <div class="grow">
        <a class="block text-sm font-medium text-foreground hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="../../../templates/dashboards/admin-dashboard/user-profile.html">
          Alex Gustuf
        </a>
        <p class="text-xs text-muted-foreground-1">
          alex
        </p>
      </div>
      <label for="hs-pro-dupcu4" class="relative py-1.5 px-2 flex items-center justify-center sm:justify-start bg-layer border border-layer-line cursor-pointer font-medium text-xs text-layer-foreground rounded-lg hover:border-line-3 focus:outline-none">
        <input type="checkbox" id="hs-pro-dupcu4" class="peer hidden" checked>
        <span class="relative z-10 peer-checked:hidden">
          Connect
        </span>
        <span class="relative z-10 hidden peer-checked:flex">
          Unconnect
        </span>
      </label>
    </div>
  </li>

<li>
    <div class="flex items-center gap-x-3">
      <img class="shrink-0 size-9.5 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">
      <div class="grow">
        <a class="block text-sm font-medium text-foreground hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="../../../templates/dashboards/admin-dashboard/user-profile.html">
          Ella Lauda
        </a>
        <p class="text-xs text-muted-foreground-1">
          ellala
        </p>
      </div>
      <label for="hs-pro-dupcu5" class="relative py-1.5 px-2 flex items-center justify-center sm:justify-start bg-layer border border-layer-line cursor-pointer font-medium text-xs text-layer-foreground rounded-lg hover:border-line-3 focus:outline-none">
        <input type="checkbox" id="hs-pro-dupcu5" class="peer hidden">
        <span class="relative z-10 peer-checked:hidden">
          Connect
        </span>
        <span class="relative z-10 hidden peer-checked:flex">
          Unconnect
        </span>
      </label>
    </div>
  </li>

<li>
    <div class="flex items-center gap-x-3">
      <span class="flex shrink-0 justify-center items-center size-9.5 bg-layer border border-layer-line text-layer-foreground text-xs font-medium uppercase rounded-full">
        Fh
      </span>
      <div class="grow">
        <a class="block text-sm font-medium text-foreground hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="../../../templates/dashboards/admin-dashboard/user-profile.html">
          Finch Hoot
        </a>
        <p class="text-xs text-muted-foreground-1">
          fhoot
        </p>
      </div>
      <label for="hs-pro-dupcu6" class="relative py-1.5 px-2 flex items-center justify-center sm:justify-start bg-layer border border-layer-line cursor-pointer font-medium text-xs text-layer-foreground rounded-lg hover:border-line-3 focus:outline-none">
        <input type="checkbox" id="hs-pro-dupcu6" class="peer hidden" checked>
        <span class="relative z-10 peer-checked:hidden">
          Connect
        </span>
        <span class="relative z-10 hidden peer-checked:flex">
          Unconnect
        </span>
      </label>
    </div>
  </li>
  
</ul>

Open related my profile template