Tailwind CSS Profile Cards & Status Panels Blocks

All Blocks
Application UI
Application Pages
Profile Cards & Status Panels

Profile Cards & Status Panels

Profile cards and status panels for account headers, avatar-led bios, presence controls, and compact member summaries across dashboards, storefronts, and portfolio pages.

Profile header card combines an illustrated cover, centered avatar, active status badge trigger, follow button, and profile navigation tabs.

<div class="p-3 md:p-5 bg-card border border-card-line shadow-2xs rounded-xl">
      
      <figure>
        <svg class="w-full" preserveAspectRatio="none" width="1113" height="161" viewBox="0 0 1113 161" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_697_201879)"><rect x="1" width="1112" height="348" fill="#B2E7FE"/><rect width="185.209" height="704.432" transform="matrix(0.50392 0.86375 -0.860909 0.508759 435.452 -177.87)" fill="#FF8F5D"/><rect width="184.653" height="378.667" transform="matrix(0.849839 -0.527043 0.522157 0.852849 -10.4556 -16.4521)" fill="#3ECEED"/><rect width="184.653" height="189.175" transform="matrix(0.849839 -0.527043 0.522157 0.852849 35.4456 58.5195)" fill="#4C48FF"/></g><defs><clipPath id="clip0_697_201879"><rect x="0.5" width="1112" height="161" rx="12" fill="white"/></clipPath></defs></svg>
      </figure>

<div class="-mt-24">
        <div class="relative flex size-30 mx-auto border-4 border-card rounded-full">
          <img class="object-cover size-full rounded-full" src="https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Hero Image">
      
          <div class="absolute bottom-0 -inset-e-2">
            <button type="button" class="group p-2 max-w-32 inline-flex justify-center items-center gap-x-2 text-start bg-red-600 border border-red-600 text-foreground-inverse text-xs font-medium rounded-full shadow-2xs align-middle focus:outline-hidden focus:bg-red-500" data-hs-overlay="#hs-pro-dsm">
              <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="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" x2="9.01" y1="9" y2="9"/><line x1="15" x2="15.01" y1="9" y2="9"/></svg>
              <span class="group-hover:block hidden">Offline</span>
            </button>
          </div>
        </div>

<div class="mt-3 text-center">
          <h1 class="text-xl font-semibold text-foreground">
            James Collins
          </h1>
          <p class="text-muted-foreground-1">
            its_james
          </p>
        </div>
      </div>

<div class="mt-4 md:mt-7 -mb-0.5 flex flex-col md:flex-row md:justify-between md:items-center gap-3">
        <div class="md:order-2 flex justify-center md:justify-end">
          <label for="hs-pro-dupfub" class="relative py-1.5 px-3 inline-flex items-center justify-center sm:justify-start bg-layer border border-layer-line cursor-pointer font-medium text-sm text-layer-foreground rounded-lg hover:border-line-3 focus:outline-none focus:border-line-3">
            <input type="checkbox" id="hs-pro-dupfub" class="peer hidden" checked>
            <span class="relative z-10 peer-checked:hidden">
              Follow
            </span>
            <span class="relative z-10 hidden peer-checked:flex">
              Unfollow
            </span>
          </label>
        </div>

<div class="relative flex justify-center md:justify-start" data-hs-scroll-nav='{
            "autoCentering": true
          }'>
          <nav class="hs-scroll-nav-body flex flex-nowrap gap-x-1 overflow-x-auto [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb pb-1.5">
            <a class="snap-start relative inline-flex flex-nowrap items-center gap-x-2 px-2.5 py-1.5 hover:bg-muted-hover text-foreground text-sm whitespace-nowrap rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus bg-surface font-medium active" href="../../../templates/dashboards/admin-dashboard/user-profile-my-profile.html">
              <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="18" cy="15" r="3"/><circle cx="9" cy="7" r="4"/><path d="M10 15H6a4 4 0 0 0-4 4v2"/><path d="m21.7 16.4-.9-.3"/><path d="m15.2 13.9-.9-.3"/><path d="m16.6 18.7.3-.9"/><path d="m19.1 12.2.3-.9"/><path d="m19.6 18.7-.4-1"/><path d="m16.8 12.3-.4-1"/><path d="m14.3 16.6 1-.4"/><path d="m20.7 13.8 1-.4"/></svg>
              My Profile
            </a>
            <a class="snap-start relative inline-flex flex-nowrap items-center gap-x-2 px-2.5 py-1.5 hover:bg-muted-hover text-foreground text-sm whitespace-nowrap rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus " href="../../../templates/dashboards/admin-dashboard/user-profile-teams.html">
              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
              Teams
            </a>
            <a class="snap-start relative inline-flex flex-nowrap items-center gap-x-2 px-2.5 py-1.5 hover:bg-muted-hover text-foreground text-sm whitespace-nowrap rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus " href="../../../templates/dashboards/admin-dashboard/user-profile-files.html">
              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15.5 2H8.6c-.4 0-.8.2-1.1.5-.3.3-.5.7-.5 1.1v12.8c0 .4.2.8.5 1.1.3.3.7.5 1.1.5h9.8c.4 0 .8-.2 1.1-.5.3-.3.5-.7.5-1.1V6.5L15.5 2z"/><path d="M3 7.6v12.8c0 .4.2.8.5 1.1.3.3.7.5 1.1.5h9.8"/><path d="M15 2v5h5"/></svg>
              Files
            </a>
            <a class="snap-start relative inline-flex flex-nowrap items-center gap-x-2 px-2.5 py-1.5 hover:bg-muted-hover text-foreground text-sm whitespace-nowrap rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus " href="../../../templates/dashboards/admin-dashboard/user-profile-connections.html">
              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3 4 7l4 4"/><path d="M4 7h16"/><path d="m16 21 4-4-4-4"/><path d="M20 17H4"/></svg>
              Connections
            </a>
          </nav>
        </div>
        
      </div>
      
    </div>

<div id="hs-pro-dsm" class="hs-overlay hidden size-full fixed top-0 inset-s-0 z-80 overflow-x-hidden overflow-y-auto [--close-when-click-inside:true] pointer-events-none" role="dialog" tabindex="-1" aria-labelledby="hs-pro-dsm-label">
      <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-xl sm:w-full m-3 sm:mx-auto h-[calc(100%-56px)] min-h-[calc(100%-56px)] flex items-center">
        <div class="w-full flex flex-col bg-overlay border border-overlay-line rounded-xl pointer-events-auto shadow-xl">
          
          <div class="py-2.5 px-4 flex justify-between items-center border-b border-overlay-divider">
            <h2 id="hs-pro-dsm-label" class="font-medium text-foreground">
              Set status
            </h2>
            <button type="button" class="size-8 shrink-0 flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-surface text-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" aria-label="Close" data-hs-overlay="#hs-pro-dsm">
              <span class="sr-only">Close</span>
              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
            </button>
          </div>

<div id="hs-modal-status-body" class="p-4 space-y-6 max-h-[75dvh] overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
            
            <div class="flex items-center -space-x-px">
              <div class="flex justify-center items-center w-11 h-9.5 border border-layer-line rounded-s-md">
                <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"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" x2="9.01" y1="9" y2="9"/><line x1="15" x2="15.01" y1="9" y2="9"/></svg>
              </div>
              <input type="text" class="py-1.5 sm:py-2 px-3 block w-full bg-layer border-layer-line rounded-e-md sm:text-sm text-layer-foreground placeholder:text-muted-foreground focus:border-primary-focus focus:z-10 focus:ring-primary-focus" placeholder="What’s your status?">
            </div>

<div>
              <p class="text-sm text-muted-foreground-1">
                Suggestions
              </p>

<div class="mt-3">
                
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                  <div class="flex flex-col gap-y-2">
                    <label for="hs-pro-dupsms1" class="relative py-2 px-3 flex cursor-pointer bg-layer text-sm rounded-lg focus:outline-hidden">
                      <input type="radio" id="hs-pro-dupsms1" name="hs-pro-dupsms" class="peer absolute top-0 inset-s-0 size-full bg-transparent border border-layer-line text-transparent rounded-lg cursor-pointer focus:ring-0 focus:ring-offset-0 after:relative after:-z-1 after:block after:size-full after:rounded-lg checked:after:bg-primary checked:text-transparent checked:border-primary-checked checked:hover:border-primary-hover checked:focus:border-primary-focus checked:bg-none disabled:opacity-50 disabled:pointer-events-none">
                      <span class="text-foreground peer-checked:text-primary">
                        🗓️ <span class="ms-2">In a meeting</span>
                      </span>
                    </label>
                    <label for="hs-pro-dupsms3" class="relative py-2 px-3 flex cursor-pointer bg-layer text-sm rounded-lg focus:outline-hidden">
                      <input type="radio" id="hs-pro-dupsms3" name="hs-pro-dupsms" class="peer absolute top-0 inset-s-0 size-full bg-transparent border border-layer-line text-transparent rounded-lg cursor-pointer focus:ring-0 focus:ring-offset-0 after:relative after:-z-1 after:block after:size-full after:rounded-lg checked:after:bg-primary checked:text-transparent checked:border-primary-checked checked:hover:border-primary-hover checked:focus:border-primary-focus checked:bg-none disabled:opacity-50 disabled:pointer-events-none">
                      <span class="text-foreground peer-checked:text-primary">
                        🚎 <span class="ms-2">Commuting</span>
                      </span>
                    </label>
                    <label for="hs-pro-dupsms5" class="relative py-2 px-3 flex cursor-pointer bg-layer text-sm rounded-lg focus:outline-hidden">
                      <input type="radio" id="hs-pro-dupsms5" name="hs-pro-dupsms" class="peer absolute top-0 inset-s-0 size-full bg-transparent border border-layer-line text-transparent rounded-lg cursor-pointer focus:ring-0 focus:ring-offset-0 after:relative after:-z-1 after:block after:size-full after:rounded-lg checked:after:bg-primary checked:text-transparent checked:border-primary-checked checked:hover:border-primary-hover checked:focus:border-primary-focus checked:bg-none disabled:opacity-50 disabled:pointer-events-none">
                      <span class="text-foreground peer-checked:text-primary">
                        🎯 <span class="ms-2">Focusing</span>
                      </span>
                    </label>
                  </div>

<div class="flex flex-col gap-y-2">
                    <label for="hs-pro-dupsms2" class="relative py-2 px-3 flex cursor-pointer bg-layer text-sm rounded-lg focus:outline-hidden">
                      <input type="radio" id="hs-pro-dupsms2" name="hs-pro-dupsms" class="peer absolute top-0 inset-s-0 size-full bg-transparent border border-layer-line text-transparent rounded-lg cursor-pointer focus:ring-0 focus:ring-offset-0 after:relative after:-z-1 after:block after:size-full after:rounded-lg checked:after:bg-primary checked:text-transparent checked:border-primary-checked checked:hover:border-primary-hover checked:focus:border-primary-focus checked:bg-none disabled:opacity-50 disabled:pointer-events-none">
                      <span class="text-foreground peer-checked:text-primary">
                        🤒 <span class="ms-2">Out sick</span>
                      </span>
                    </label>
                    <label for="hs-pro-dupsms7" class="relative py-2 px-3 flex cursor-pointer bg-layer text-sm rounded-lg focus:outline-hidden">
                      <input type="radio" id="hs-pro-dupsms7" name="hs-pro-dupsms" class="peer absolute top-0 inset-s-0 size-full bg-transparent border border-layer-line text-transparent rounded-lg cursor-pointer focus:ring-0 focus:ring-offset-0 after:relative after:-z-1 after:block after:size-full after:rounded-lg checked:after:bg-primary checked:text-transparent checked:border-primary-checked checked:hover:border-primary-hover checked:focus:border-primary-focus checked:bg-none disabled:opacity-50 disabled:pointer-events-none">
                      <span class="text-foreground peer-checked:text-primary">
                        🌴 <span class="ms-2">On vacation</span>
                      </span>
                    </label>
                    <label for="hs-pro-dupsms6" class="relative py-2 px-3 flex cursor-pointer bg-layer text-sm rounded-lg focus:outline-hidden">
                      <input type="radio" id="hs-pro-dupsms6" name="hs-pro-dupsms" class="peer absolute top-0 inset-s-0 size-full bg-transparent border border-layer-line text-transparent rounded-lg cursor-pointer focus:ring-0 focus:ring-offset-0 after:relative after:-z-1 after:block after:size-full after:rounded-lg checked:after:bg-primary checked:text-transparent checked:border-primary-checked checked:hover:border-primary-hover checked:focus:border-primary-focus checked:bg-none disabled:opacity-50 disabled:pointer-events-none">
                      <span class="text-foreground peer-checked:text-primary">
                        🏡 <span class="ms-2">Working remotely</span>
                      </span>
                    </label>
                  </div>
                  
                </div>
                
              </div>
            </div>

<ul class="flex flex-col bg-layer border border-layer-line rounded-xl -space-y-px">
              
              <li class="p-3 border-t border-layer-line first:border-t-0">
                <div class="flex gap-x-3">
                  <span class="mt-0.5 shrink-0 flex flex-col justify-center items-center size-6.5 bg-red-500 text-foreground-inverse rounded-full">
                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                      <path d="M5.164 14H15c-1.5-1-2-5.902-2-7 0-.264-.02-.523-.06-.776L5.164 14zm6.288-10.617A4.988 4.988 0 0 0 8.995 2.1a1 1 0 1 0-1.99 0A5.002 5.002 0 0 0 3 7c0 .898-.335 4.342-1.278 6.113l9.73-9.73zM10 15a2 2 0 1 1-4 0h4zm-9.375.625a.53.53 0 0 0 .75.75l14.75-14.75a.53.53 0 0 0-.75-.75L.625 15.625z"/>
                    </svg>
                  </span>
                  <div class="grow">
                    <div class="flex justify-between items-center mb-1">
                      <p class="text-sm font-semibold text-foreground">
                        Offline
                      </p>
                      <label for="hs-pro-dsmofs" class="relative inline-block w-11 h-6 cursor-pointer">
                        <input type="checkbox" id="hs-pro-dsmofs" class="peer sr-only" checked>
                        <span class="absolute inset-0 bg-surface-1 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                        <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-5 bg-switch rounded-full shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                      </label>
                    </div>
                    <p class="text-xs text-muted-foreground-1">
                      Mute notifications and unassign new messages
                    </p>
                  </div>
                </div>
              </li>

<li class="p-3 border-t border-layer-line first:border-t-0">
                <div class="flex gap-x-3">
                  <span class="mt-0.5 shrink-0 flex flex-col justify-center items-center size-6.5 bg-yellow-500 text-foreground-inverse rounded-full">
                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                      <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
                    </svg>
                  </span>
                  <div class="grow">
                    <div class="flex justify-between items-center mb-1">
                      <p class="text-sm font-semibold text-foreground">
                        Do not disturb
                      </p>
                      <label for="hs-pro-dsmdnds" class="relative inline-block w-11 h-6 cursor-pointer">
                        <input type="checkbox" id="hs-pro-dsmdnds" class="peer sr-only">
                        <span class="absolute inset-0 bg-surface-1 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                        <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-5 bg-switch rounded-full shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                      </label>
                    </div>
                    <p class="text-xs text-muted-foreground-1">
                      Mute notifications
                    </p>
                  </div>
                </div>
              </li>

<li class="p-3 border-t border-layer-line first:border-t-0">
                <div class="flex gap-x-3">
                  <span class="mt-0.5 shrink-0 flex flex-col justify-center items-center size-6.5 bg-yellow-500 text-foreground-inverse rounded-full">
                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                      <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
                    </svg>
                  </span>
                  <div class="grow">
                    <div class="flex justify-between items-center mb-1">
                      <p class="text-sm font-semibold text-foreground">
                        Schedule
                      </p>
                      <label for="hs-pro-dsmschs" class="relative inline-block w-11 h-6 cursor-pointer">
                        <input type="checkbox" id="hs-pro-dsmschs" class="peer sr-only">
                        <span class="absolute inset-0 bg-surface-1 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                        <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-5 bg-switch rounded-full shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                      </label>
                    </div>

<div class="mt-3 sm:mt-1 flex flex-wrap items-center gap-2">
                      
                      <div class="relative">
                        <select id="hs-pro-select-time1" data-hs-select='{
                            "placeholder": "Select option...",
                            "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                            "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 px-4 pe-7 flex text-nowrap w-full cursor-pointer bg-surface rounded-lg text-start text-sm text-surface-foreground focus:outline-hidden focus:bg-surface-focus before:absolute before:inset-0 before:z-1",
                            "dropdownClasses": "mt-2 z-50 w-full min-w-36 max-h-72 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select border border-select-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                            "optionClasses": "hs-selected:bg-select-item-active py-2 px-3 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-md focus:outline-hidden focus:bg-select-item-focus",
                            "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>",
                            "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/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=\"m7 15 5 5 5-5\"/><path d=\"m7 9 5-5 5 5\"/></svg></div>",
                            "viewport": "#hs-modal-status-body"
                          }' class="hidden">
                          <option value="">Choose</option>
                          <option>12:01 AM</option>
                          <option>1:00 AM</option>
                          <option>2:00 AM</option>
                          <option>3:00 AM</option>
                          <option>4:00 AM</option>
                          <option>5:00 AM</option>
                          <option>6:00 AM</option>
                          <option>7:00 AM</option>
                          <option>8:00 AM</option>
                          <option selected>9:00 AM</option>
                          <option >10:00 AM</option>
                          <option>11:00 AM</option>
                          <option>12:01 PM</option>
                          <option>1:00 PM</option>
                          <option>2:00 PM</option>
                          <option>3:00 PM</option>
                          <option>4:00 PM</option>
                          <option>5:00 PM</option>
                          <option>6:00 PM</option>
                          <option>7:00 PM</option>
                          <option>8:00 PM</option>
                          <option>9:00 PM</option>
                          <option>10:00 PM</option>
                          <option>11:00 PM</option>
                        </select>
                      </div>

<span class="text-sm text-muted-foreground-1">to:</span>
          
                      
                      <div class="relative">
                        <select id="hs-pro-select-time2" data-hs-select='{
                            "placeholder": "Select option...",
                            "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                            "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 px-4 pe-7 flex text-nowrap w-full cursor-pointer bg-surface rounded-lg text-start text-sm text-surface-foreground focus:outline-hidden focus:bg-surface-focus before:absolute before:inset-0 before:z-1",
                            "dropdownClasses": "mt-2 z-50 w-full min-w-36 max-h-72 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select border border-select-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                            "optionClasses": "hs-selected:bg-select-item-active py-2 px-3 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-md focus:outline-hidden focus:bg-select-item-focus",
                            "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>",
                            "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/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=\"m7 15 5 5 5-5\"/><path d=\"m7 9 5-5 5 5\"/></svg></div>",
                            "viewport": "#hs-modal-status-body"
                          }' class="hidden">
                          <option value="">Choose</option>
                          <option>12:01 AM</option>
                          <option>1:00 AM</option>
                          <option>2:00 AM</option>
                          <option>3:00 AM</option>
                          <option>4:00 AM</option>
                          <option>5:00 AM</option>
                          <option>6:00 AM</option>
                          <option>7:00 AM</option>
                          <option>8:00 AM</option>
                          <option >9:00 AM</option>
                          <option selected>10:00 AM</option>
                          <option>11:00 AM</option>
                          <option>12:01 PM</option>
                          <option>1:00 PM</option>
                          <option>2:00 PM</option>
                          <option>3:00 PM</option>
                          <option>4:00 PM</option>
                          <option>5:00 PM</option>
                          <option>6:00 PM</option>
                          <option>7:00 PM</option>
                          <option>8:00 PM</option>
                          <option>9:00 PM</option>
                          <option>10:00 PM</option>
                          <option>11:00 PM</option>
                        </select>
                      </div>
                      
                    </div>
                    
                  </div>
                </div>
              </li>
              
            </ul>

<div class="flex flex-wrap items-center gap-3 sm:gap-4">
              <div class="flex items-center gap-x-3">
                <label class="text-sm text-muted-foreground-1">
                  Clear status
                </label>

<div class="relative">
                  <select data-hs-select='{
                      "placeholder": "Status",
                      "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                      "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 ps-3 pe-7 inline-flex justify-center items-center text-start bg-layer border border-layer-line text-layer-foreground text-sm rounded-lg shadow-2xs align-middle focus:outline-hidden before:absolute before:inset-0 before:z-1 hover:bg-layer-hover",
                      "dropdownClasses": "mt-2 z-50 w-48 p-1 space-y-0.5 bg-select border border-select-line rounded-xl shadow-xl",
                      "optionClasses": "hs-selected:bg-select-item-active py-2 px-4 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus",
                      "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>",
                      "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/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=\"m7 15 5 5 5-5\"/><path d=\"m7 9 5-5 5 5\"/></svg></div>",
                      "viewport": "#hs-modal-status-body"
                    }' class="hidden">
                    <option value="">Choose</option>
                    <option selected>Never</option>
                    <option>In 30 minutes</option>
                    <option>In 1 hour</option>
                    <option>Today</option>
                    <option>This week</option>
                  </select>
                </div>
                
              </div>

<div class="flex items-center gap-x-3">
                <label class="text-sm text-muted-foreground-1">
                  Visible to
                </label>

<div class="relative inline-block">
                  <select id="hs-pro-select-visibility" data-hs-select='{
                      "placeholder": "Visibile to",
                      "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                      "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 ps-3 pe-7 inline-flex justify-center items-center text-start bg-layer border border-layer-line text-layer-foreground text-sm rounded-lg shadow-2xs align-middle focus:outline-hidden before:absolute before:inset-0 before:z-1 hover:bg-layer-hover",
                      "dropdownClasses": "mt-2 z-50 w-48 p-1 space-y-0.5 bg-select border border-select-line rounded-xl shadow-xl",
                      "optionClasses": "hs-selected:bg-select-item-active py-2 px-4 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus",
                      "optionTemplate": "<div><div class=\"flex items-center\"><div class=\"me-2\" data-icon></div><div class=\"font-semibold text-foreground\" data-title></div></div><div class=\"text-sm text-muted-foreground-1\" data-description></div></div>",
                      "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/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=\"m7 15 5 5 5-5\"/><path d=\"m7 9 5-5 5 5\"/></svg></div>",
                      "viewport": "#hs-modal-status-body"
                    }' class="hidden">
                    <option value="">Choose</option>
                    <option value="1" selected data-hs-select-option='{
                      "description": "Your status will be visible to everyone",
                      "icon": "<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\" class=\"lucide lucide-globe-2\"><path d=\"M21.54 15H17a2 2 0 0 0-2 2v4.54\"/><path d=\"M7 3.34V5a3 3 0 0 0 3 3v0a2 2 0 0 1 2 2v0c0 1.1.9 2 2 2v0a2 2 0 0 0 2-2v0c0-1.1.9-2 2-2h3.17\"/><path d=\"M11 21.95V18a2 2 0 0 0-2-2v0a2 2 0 0 1-2-2v-1a2 2 0 0 0-2-2H2.05\"/><circle cx=\"12\" cy=\"12\" r=\"10\"/></svg>"
                    }'>Anyone</option>
                    <option value="2" data-hs-select-option='{
                      "icon": "<svg class=\"inline-block size-4\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M16.0355 1.75926C10.6408 1.75926 5.30597 1.49951 0.0111241 1C-0.288584 7.23393 5.50578 13.1282 12.7987 14.5668L13.9975 14.7266C14.3372 12.4289 15.9956 3.7773 16.595 1.73928C16.4152 1.75926 16.2353 1.75926 16.0355 1.75926Z\" fill=\"#A49DFF\"/><path d=\"M16.615 1.75926C16.615 1.75926 25.2266 7.9932 28.5234 16.3451C30.0419 11.3499 31.1608 6.15498 32 1C26.8051 1.49951 21.71 1.75926 16.615 1.75926Z\" fill=\"#28289A\"/><path d=\"M13.9975 14.7466L13.8177 15.9455C13.8177 15.9455 12.2592 28.4133 23.1886 31.9699C25.2266 26.8748 27.0049 21.6599 28.5234 16.3251C21.9698 15.8456 13.9975 14.7466 13.9975 14.7466Z\" fill=\"#5ADCEE\"/><path d=\"M16.6149 1.75927C16.0155 3.79729 14.3571 12.4089 14.0175 14.7466C14.0175 14.7466 21.9897 15.8456 28.5233 16.3251C25.1866 7.9932 16.6149 1.75927 16.6149 1.75927Z\" fill=\"#7878FF\"/></svg>"
                    }'>Guideline</option>
                  </select>
                </div>
                
              </div>
            </div>
            
          </div>

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

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

Open related admin My Profile page

Profile header card combines an illustrated cover, centered avatar, status selector trigger, edit action, and profile navigation tabs.

<div class="p-3 md:p-5 bg-card border border-card-line shadow-2xs rounded-xl">
      
      <figure>
        <svg class="w-full" preserveAspectRatio="none" width="1113" height="161" viewBox="0 0 1113 161" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_666_220723)"><rect x="0.5" width="1112" height="161" rx="12" fill="white"/><rect x="1" width="1112" height="348" fill="#D9DEEA"/><path d="M512.694 359.31C547.444 172.086 469.835 34.2204 426.688 -11.3096H1144.27V359.31H512.694Z" fill="#C0CBDD"/><path d="M818.885 185.745C703.515 143.985 709.036 24.7949 726.218 -29.5801H1118.31V331.905C1024.49 260.565 963.098 237.945 818.885 185.745Z" fill="#8192B0"/><defs><clipPath id="clip0_666_220723"><rect x="0.5" width="1112" height="161" rx="12" fill="white"/></clipPath></defs></svg>
      </figure>

<div class="-mt-24">
        <div class="relative flex size-30 mx-auto border-4 border-card rounded-full">
          <img class="object-cover size-full rounded-full" src="https://images.unsplash.com/photo-1659482634023-2c4fda99ac0c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Hero Image">
      
          <div class="absolute bottom-0 -inset-e-2">
            <button type="button" class="group p-2 max-w-32 inline-flex justify-center items-center gap-x-1.5 text-start bg-layer border border-layer-line text-layer-foreground text-xs font-medium rounded-full whitespace-nowrap shadow-2xs align-middle hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus" data-hs-overlay="#hs-pro-dsm">
              <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"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" x2="9.01" y1="9" y2="9"/><line x1="15" x2="15.01" y1="9" y2="9"/></svg>
              <span class="group-hover:block hidden">Set status</span>
            </button>
          </div>
        </div>

<div class="mt-3 text-center">
          <h1 class="text-xl font-semibold text-foreground">
            Amanda Harvey
          </h1>
          <p class="text-muted-foreground-1">
            iam_amanda
          </p>
        </div>
      </div>

<div class="mt-4 md:mt-7 -mb-0.5 flex flex-col md:flex-row md:justify-between md:items-center gap-3">
        <div class="md:order-2 flex justify-center md:justify-end">
          <a class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" href="../../../templates/dashboards/admin-dashboard/account-profile.html">
            Edit
          </a>
        </div>

<div class="relative flex justify-center md:justify-start" data-hs-scroll-nav='{
            "autoCentering": true
          }'>
          <nav class="hs-scroll-nav-body flex flex-nowrap gap-x-1 overflow-x-auto [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb pb-1.5">
            <a class="snap-start relative inline-flex flex-nowrap items-center gap-x-2 px-2.5 py-1.5 hover:bg-muted-hover text-foreground text-sm whitespace-nowrap rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus " href="../../../templates/dashboards/admin-dashboard/user-profile-my-profile.html">
              <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="18" cy="15" r="3"/><circle cx="9" cy="7" r="4"/><path d="M10 15H6a4 4 0 0 0-4 4v2"/><path d="m21.7 16.4-.9-.3"/><path d="m15.2 13.9-.9-.3"/><path d="m16.6 18.7.3-.9"/><path d="m19.1 12.2.3-.9"/><path d="m19.6 18.7-.4-1"/><path d="m16.8 12.3-.4-1"/><path d="m14.3 16.6 1-.4"/><path d="m20.7 13.8 1-.4"/></svg>
              My Profile
            </a>
            <a class="snap-start relative inline-flex flex-nowrap items-center gap-x-2 px-2.5 py-1.5 hover:bg-muted-hover text-foreground text-sm whitespace-nowrap rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus " href="../../../templates/dashboards/admin-dashboard/user-profile-teams.html">
              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
              Teams
            </a>
            <a class="snap-start relative inline-flex flex-nowrap items-center gap-x-2 px-2.5 py-1.5 hover:bg-muted-hover text-foreground text-sm whitespace-nowrap rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus " href="../../../templates/dashboards/admin-dashboard/user-profile-files.html">
              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15.5 2H8.6c-.4 0-.8.2-1.1.5-.3.3-.5.7-.5 1.1v12.8c0 .4.2.8.5 1.1.3.3.7.5 1.1.5h9.8c.4 0 .8-.2 1.1-.5.3-.3.5-.7.5-1.1V6.5L15.5 2z"/><path d="M3 7.6v12.8c0 .4.2.8.5 1.1.3.3.7.5 1.1.5h9.8"/><path d="M15 2v5h5"/></svg>
              Files
            </a>
            <a class="snap-start relative inline-flex flex-nowrap items-center gap-x-2 px-2.5 py-1.5 hover:bg-muted-hover text-foreground text-sm whitespace-nowrap rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus " href="../../../templates/dashboards/admin-dashboard/user-profile-connections.html">
              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3 4 7l4 4"/><path d="M4 7h16"/><path d="m16 21 4-4-4-4"/><path d="M20 17H4"/></svg>
              Connections
            </a>
          </nav>
        </div>
        
      </div>
      
    </div>

<div>
              <p class="text-sm text-muted-foreground-1">
                Suggestions
              </p>

<li class="p-3 border-t border-layer-line first:border-t-0">
                <div class="flex gap-x-3">
                  <span class="mt-0.5 shrink-0 flex flex-col justify-center items-center size-6.5 bg-yellow-500 text-foreground-inverse rounded-full">
                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                      <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
                    </svg>
                  </span>
                  <div class="grow">
                    <div class="flex justify-between items-center mb-1">
                      <p class="text-sm font-semibold text-foreground">
                        Schedule
                      </p>
                      <label for="hs-pro-dsmschs" class="relative inline-block w-11 h-6 cursor-pointer">
                        <input type="checkbox" id="hs-pro-dsmschs" class="peer sr-only">
                        <span class="absolute inset-0 bg-surface-1 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                        <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-5 bg-switch rounded-full shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                      </label>
                    </div>

<div class="flex items-center gap-x-3">
                <label class="text-sm text-muted-foreground-1">
                  Visible to
                </label>

Open related admin user profile page

Dark Profile Summary Panel with Avatar and Contact Button Pro

Dark profile summary panel pairs an avatar-led heading with inline role and contact details plus a contact action.

<div class="relative pt-5 bg-navbar-inverse before:absolute before:-bottom-14 before:inset-s-0 before:-z-1 before:w-full before:h-14 before:bg-navbar-inverse">
      <div class="max-w-5xl mx-auto px-2 sm:px-5 xl:px-0">
        <div class="grid grid-cols-2 sm:flex items-center gap-5 pt-4 lg:pt-10 pb-5 md:pb-8">
          
          <div class="col-span-1 sm:col-span-auto shrink-0">
            <div class="relative shrink-0 size-16 sm:size-20">
              
              <img class="shrink-0 size-full rounded-2xl sm:rounded-3xl" src="https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">
              <div class="absolute -bottom-3 inset-x-0 text-center">
                <span class="py-1 px-2 inline-flex items-center gap-x-1 text-xs font-semibold uppercase rounded-md bg-linear-to-tr from-lime-500 to-teal-500 text-foreground-inverse">Pro</span>
              </div>
            </div>
          </div>
          
            
          <div class="col-span-1 sm:col-span-auto sm:order-3">
            <div class="flex justify-end">
              <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 whitespace-nowrap text-sm bg-plain/10 text-foreground-inverse rounded-lg hover:bg-plain/20 focus:outline-hidden focus:bg-plain/20" data-hs-overlay="#@@modalID">
                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/><path d="M8 12h.01"/><path d="M12 12h.01"/><path d="M16 12h.01"/></svg>Contact
              </button>
            </div>
          </div>

<div class="grow col-span-full">
            <h1 class="text-2xl md:text-3xl font-semibold text-foreground-inverse">
              Amanda Harvey
            </h1>

<ul class="mt-2 flex flex-wrap items-center gap-x-3">
              <li class="relative before:hidden md:before:inline-block first:before:hidden first:before:ms-0 before:content-['•'] before:text-foreground-inverse/40 before:me-1.5">
                <span class="text-sm text-foreground-inverse/50">
                  Role:
                </span>
                <span class="inline-flex items-center gap-x-2 text-sm text-foreground-inverse">
                  Front-End Developer
                </span>
              </li>
          
              <li class="relative before:hidden md:before:inline-block first:before:hidden first:before:ms-0 before:content-['•'] before:text-foreground-inverse/40 before:me-1.5">
                <span class="text-sm text-foreground-inverse/50">
                  Phone:
                </span>
                <span class="inline-flex items-center gap-x-2 text-sm text-foreground-inverse">
                  (892) 312-5483
                </span>
              </li>
          
              <li class="relative before:hidden md:before:inline-block first:before:hidden first:before:ms-0 before:content-['•'] before:text-foreground-inverse/40 before:me-1.5">
                <span class="text-sm text-foreground-inverse/50">
                  Email:
                </span>
                <span class="inline-flex items-center gap-x-2 text-sm text-foreground-inverse">
                  amanda@site.com
                </span>
              </li>
            </ul>
            
          </div>
          
        </div>
      </div>
    </div>

Open related talent details page

Compact account profile card pairs a round avatar, name and email block, and a logout action.

Open related storefront account page

Profile intro card combines a large avatar, short biography, and stacked contact links for email and social profiles.

<div class="flex items-center gap-x-3">
        <div class="shrink-0">
          <img class="shrink-0 size-16 rounded-full" src="https://images.unsplash.com/photo-1510706019500-d23a509eecd4?q=80&w=2667&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Avatar">
        </div>

<div class="grow">
          <h1 class="text-lg font-medium text-foreground">
            Eliana Garcia
          </h1>
          <p class="text-sm text-muted-foreground-2">
            Graphic Designer, Web designer/developer
          </p>
        </div>
      </div>

<div class="mt-8">
        <p class="text-sm text-muted-foreground-2">
          I am a seasoned graphic designer with over 14 years of experience in creating visually appealing and user-centric designs. My expertise spans across UI design, design systems, and custom illustrations, helping clients bring their digital visions to life.
        </p>
  
        <p class="mt-3 text-sm text-muted-foreground-2">
          Currently, I work remotely for Notion, where I design template UIs, convert them into HTML and CSS, and provide comprehensive support to our users. I am passionate about crafting elegant and functional designs that enhance user experiences.
        </p>
  
        <ul class="mt-5 flex flex-col gap-y-3">
          <li class="flex items-center gap-x-2.5">
            <svg class="shrink-0 size-3.5 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
            <a class="text-[13px] text-muted-foreground-1 underline hover:text-primary-hover hover:decoration-2 focus:outline-hidden focus:decoration-2" href="#">
              elianagarcia997@about.me
            </a>
          </li>

<li class="flex items-center gap-x-2.5">
            <svg class="shrink-0 size-3.5 text-foreground" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.1881 10.1624L22.7504 0H20.7214L13.2868 8.82385L7.34878 0H0.5L9.47944 13.3432L0.5 24H2.5291L10.3802 14.6817L16.6512 24H23.5L14.1881 10.1624ZM11.409 13.4608L3.26021 1.55962H6.37679L20.7224 22.5113H17.6058L11.409 13.4613V13.4608Z" fill="currentColor"/></svg>
            <a class="text-[13px] text-muted-foreground-1 underline hover:text-primary-hover hover:decoration-2 focus:outline-hidden focus:decoration-2" href="#">
              @elianagarcia997
            </a>
          </li>

<li class="flex items-center gap-x-2.5">
            <svg class="shrink-0 size-3.5 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M19.13 5.09C15.22 9.14 10 10.44 2.25 10.94"/><path d="M21.75 12.84c-6.62-1.41-12.14 1-16.38 6.32"/><path d="M8.56 2.75c4.37 6 6 9.42 8 17.72"/></svg>
            <a class="text-[13px] text-muted-foreground-1 underline hover:text-primary-hover hover:decoration-2 focus:outline-hidden focus:decoration-2" href="#">
              @elianagarcia997
            </a>
          </li>
        </ul>
      </div>

Profile Cards & Status Panels

Profile Card with Active Status Badge and Follow Button Pro

Profile Card with Status Selector and Edit Action Pro

Dark Profile Summary Panel with Avatar and Contact Button Pro

Simple Profile Card with Avatar Email and Logout Link Pro

Profile Card with Avatar Bio and Contact Links Free