Tailwind CSS Dashboard Demo Layouts Blocks

Dashboard Demo Layouts

Dashboard shells for admin, payments, analytics, and file-focused workspaces.

Admin Dashboard Layout Pro

Left sidebar, top header, and footer around one main dashboard content column.

<header class="lg:ms-65 fixed top-0 inset-x-0 flex flex-wrap md:justify-start md:flex-nowrap z-50 bg-navbar border-b border-navbar-line">
                    <div class="flex justify-between xl:grid xl:grid-cols-3 basis-full items-center w-full py-2.5 px-2 sm:px-5">
                      <div class="xl:col-span-1 flex items-center md:gap-x-3">
                        <div class="lg:hidden">
                          
                          <button type="button" class="w-7 h-9.5 inline-flex justify-center 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" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-pro-sidebar" aria-label="Toggle navigation" data-hs-overlay="#hs-pro-sidebar">
                            <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="M17 8L21 12L17 16M3 12H13M3 6H13M3 18H13"/></svg>
                          </button>
                          
                        </div>
      
                        <div class="hidden lg:block min-w-80 xl:w-full">
                          
                          <div class="relative">
                            <div class="absolute inset-y-0 inset-s-0 flex items-center pointer-events-none z-20 ps-3.5">
                              <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="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
                            </div>
                            <input type="text" class="py-2 ps-10 pe-16 block w-full bg-layer border-layer-line rounded-lg text-sm text-layer-foreground placeholder:text-muted-foreground-1 focus:outline-hidden focus:ring-0 disabled:opacity-50 disabled:pointer-events-none" placeholder="Search Preline" data-hs-overlay="#hs-pro-dnsm">
                            <div class="hidden absolute inset-y-0 inset-e-0 flex items-center z-20 pe-1">
                              <button type="button" class="inline-flex shrink-0 justify-center items-center size-6 rounded-full text-muted-foreground-1 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" aria-label="Close">
                                <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"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
                              </button>
                            </div>
                            <div class="absolute inset-y-0 inset-e-0 flex items-center pointer-events-none z-20 pe-3 text-muted-foreground">
                              <svg class="shrink-0 size-3 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="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"/></svg>
                              <span class="mx-1">
                                <svg class="shrink-0 size-3 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="M5 12h14"/><path d="M12 5v14"/></svg>
                              </span>
                              <span class="text-xs text-muted-foreground-1">/</span>
                            </div>
                          </div>
                          
                        </div>
                      </div>

<div class="hs-dropdown [--placement:bottom-right] relative inline-flex">
                            
                            <div class="hs-tooltip [--placement:bottom] inline-block">
                              <button id="hs-pro-dnhd" type="button" class="hs-tooltip-toggle size-9.5 inline-flex justify-center items-center gap-x-2 rounded-full 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="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></svg>
                              </button>
                              <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                Help and Support
                              </span>
                            </div>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-60 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-dnhd">
                              <div class="p-1">
                                <a class="flex gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                  <svg class="shrink-0 mt-0.5 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="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></svg>
                                  Help Centre
                                </a>
                                <a class="flex gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                  <svg class="shrink-0 mt-0.5 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>
                                  Community
                                </a>
                                <a class="flex gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                  <svg class="shrink-0 mt-0.5 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="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
                                  What’s New
                                </a>

<a class="flex gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                  <svg class="shrink-0 mt-0.5 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="M12 16v-4"/><path d="M12 8h.01"/></svg>
                                  Privacy and Legal
                                </a>
                                <a class="flex gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                  <svg class="shrink-0 mt-0.5 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="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
                                  Documentation
                                </a>
                                <a class="flex gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                  <svg class="shrink-0 mt-0.5 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"><rect width="20" height="14" x="2" y="7" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>
                                  Hire an Expert
                                  <div class="ms-auto">
                                    <span class="inline-flex items-center gap-1.5 py-px px-1.5 rounded-sm text-[10px] leading-4 font-medium bg-surface text-surface-foreground">
                                      New
                                    </span>
                                  </div>
                                </a>
      
                                <div class="my-1 border-t border-dropdown-divider"></div>

<a class="flex gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                  <svg class="shrink-0 mt-0.5 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="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><line x1="9" x2="15" y1="10" y2="10"/><line x1="12" x2="12" y1="7" y2="13"/></svg>
                                  Submit Feedback
                                </a>
                                <div class="hs-dropdown [--strategy:static] md:[--strategy:absolute] [--adaptive:none] md:[--trigger:hover] relative">
                                  <button id="hs-pro-dropdown-help-and-support" type="button" class="hs-dropdown-toggle w-full flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-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"><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>
                                    Contact Us
                                    <svg class="rotate-90 md:rotate-0 ms-auto size-3" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                                  </button>

<div class="hs-dropdown-menu transition-[opacity,margin] duration-[0.1ms] md:duration-150 hs-dropdown-open:opacity-100 opacity-0 md:w-48 hidden z-10 top-0 inset-e-full md:me-3! md:mt-1 md:p-1 bg-dropdown border border-dropdown-line md:shadow-xl md:rounded-lg before:absolute before:-inset-e-5 before:top-0 before:h-full before:w-5" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dropdown-help-and-support">
                                    <a class="flex gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                      <svg class="shrink-0 mt-0.5 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="M14 9a2 2 0 0 1-2 2H6l-4 4V4c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2v5Z"/><path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1"/></svg>
                                      Contact Support
                                    </a>
                                    <a class="flex gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                      <svg class="shrink-0 mt-0.5 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="M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3"/></svg>
                                      Contact Sales
                                    </a>
                                  </div>
                                </div>
                              </div>
                            </div>
                            
                          </div>

<div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
                            <div class="hs-tooltip [--placement:bottom] inline-block">
                              <button id="hs-pro-dnnd" type="button" class="hs-tooltip-toggle relative size-9.5 inline-flex justify-center items-center gap-x-2 border border-transparent text-muted-foreground-1 hover:bg-muted-hover focus:bg-muted-focus rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden" 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"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
                                <span class="flex absolute top-0 inset-e-0 z-10 -mt-1.5 -me-1.5">
                                  <span class="animate-ping absolute inline-flex size-full rounded-full bg-red-400 opacity-75 dark:bg-red-600"></span>
                                  <span class="relative min-w-4.5 min-h-4.5 inline-flex justify-center items-center text-[10px] bg-red-500 text-foreground-inverse rounded-full px-1">
                                    2
                                  </span>
                                </span>
                              </button>
                              <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                Notifications
                              </span>
                            </div>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-full sm:w-96 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border-t border-dropdown-line sm:border sm:rounded-lg shadow-md sm:shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dnnd">
                              
                              <div class="px-5 pt-3 flex justify-between items-center border-b border-dropdown-divider">
                                
                                <nav  class="flex gap-1" aria-label="Tabs" role="tablist" aria-orientation="horizontal">
                                  <button type="button" class="hs-tab-active:after:bg-secondary hs-tab-active:text-foreground px-2 py-1.5 mb-2 relative inline-flex justify-center items-center gap-x-2 hover:bg-muted-hover text-muted-foreground-1 hover:text-foreground text-sm rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus text-muted-foreground-1 focus:text-foreground after:absolute after:-bottom-2 after:inset-x-2 after:z-10 after:h-0.5 after:pointer-events-none disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden active" id="hs-pro-tabs-dnn-item-all" aria-selected="true" data-hs-tab="#hs-pro-tabs-dnn-all" aria-controls="hs-pro-tabs-dnn-all" role="tab" >
                                    All
                                  </button>
                                  <button type="button" class="hs-tab-active:after:bg-secondary hs-tab-active:text-foreground px-2 py-1.5 mb-2 relative inline-flex justify-center items-center gap-x-2 hover:bg-muted-hover text-muted-foreground-1 hover:text-foreground text-sm rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus text-muted-foreground-1 focus:text-foreground after:absolute after:-bottom-2 after:inset-x-2 after:z-10 after:h-0.5 after:pointer-events-none disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden " id="hs-pro-tabs-dnn-item-archived" aria-selected="false" data-hs-tab="#hs-pro-tabs-dnn-archived" aria-controls="hs-pro-tabs-dnn-archived" role="tab" >
                                    Archived
                                  </button>
                                </nav>
                                
      
                                
                                <div class="hs-tooltip relative inline-block mb-3">
                                  <a class="hs-tooltip-toggle size-7 inline-flex justify-center items-center gap-x-2 rounded-full 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" href="../../../templates/dashboards/admin-dashboard/account-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" ><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
                                  </a>
                                  <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                    Preferences
                                  </span>
                                </div>
                                
                              </div>

<div id="hs-pro-tabs-dnn-all" role="tabpanel" aria-labelledby="hs-pro-tabs-dnn-item-all">
                                <div class="h-120 overflow-y-auto overflow-hidden [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                                  <ul class="divide-y divide-dropdown-divider">
                                    
                                    <li class="relative group w-full flex gap-x-5 text-start bg-surface p-5">
                                      <div class="relative shrink-0">
                                        <img class="shrink-0 size-9.5 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="Avatar">
                                        <span class="absolute top-4 -inset-s-3 size-2 bg-primary rounded-full"></span>
                                      </div>
                                      <div class="grow">
                                        <p class="text-xs text-muted-foreground-1">
                                          2 hours ago
                                        </p>
                                        
                                        <span class="block text-sm font-medium text-foreground">
                                          Eilis Warner
                                        </span>
                                        <p class="text-sm text-muted-foreground-1">
                                          changed an issue from 'in Progress' to 'Review'
                                        </p>
                                      </div>
  
                                      <div>
                                        <div class="sm:group-hover:opacity-100 sm:opacity-0 sm:absolute sm:top-5 sm:inset-e-5">
                                          
                                          <div class="inline-block p-0.5 bg-card border border-card-line rounded-lg shadow-2xs transition ease-out">    
                                            <div class="flex items-center">
                                              <div class="hs-tooltip relative inline-block">
                                                <button type="button" class="hs-tooltip-toggle size-7 flex shrink-0 justify-center items-center text-muted-foreground-1 hover:bg-muted-hover hover:text-foreground rounded-sm disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                                  <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
                                                  <svg class="shrink-0 size-4 hidden" 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="18" height="18" x="3" y="3" rx="2"/><path d="M8 12h8"/></svg>
                                                </button>
                                                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                                  Mark this notification as read
                                                </span>
                                              </div>
                                              <div class="hs-tooltip relative inline-block">
                                                <button type="button" class="hs-tooltip-toggle size-7 flex shrink-0 justify-center items-center text-muted-foreground-1 hover:bg-muted-hover hover:text-foreground rounded-sm disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                                  <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"><rect width="20" height="5" x="2" y="4" rx="2"/><path d="M4 9v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9"/><path d="M10 13h4"/></svg>
                                                </button>
                                                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                                  Archive this notification
                                                </span>
                                              </div>
                                            </div>
                                          </div>
                                          
                                        </div>
                                      </div>
                                    </li>

<li class="relative group w-full flex gap-x-5 text-start  p-5">
                                      <div class="relative shrink-0">
                                        <span class="flex shrink-0 justify-center items-center size-9.5 bg-layer border border-layer-line text-layer-foreground text-sm font-semibold rounded-full shadow-2xs">
                                          C
                                        </span>
                                      </div>
                                      <div class="grow">
                                        <p class="text-xs text-muted-foreground-1">
                                          3 days ago
                                        </p>
                                        
                                        <span class="block text-sm font-medium text-foreground">
                                          Clara Becker
                                        </span>
                                        <p class="text-sm text-muted-foreground-1">
                                          mentioned you in a comment
                                        </p>
                                        <div class="mt-2">
                                          <blockquote class="ps-3 border-s-4 border-line-2 text-sm text-muted-foreground-1">
                                            Nice work, love! You really nailed it. Keep it up!
                                          </blockquote>
                                        </div>
                                      </div>
  
                                      <div>
                                        <div class="sm:group-hover:opacity-100 sm:opacity-0 sm:absolute sm:top-5 sm:inset-e-5">
                                          
                                          <div class="inline-block p-0.5 bg-card border border-card-line rounded-lg shadow-2xs transition ease-out">    
                                            <div class="flex items-center">
                                              <div class="hs-tooltip relative inline-block">
                                                <button type="button" class="hs-tooltip-toggle size-7 flex shrink-0 justify-center items-center text-muted-foreground-1 hover:bg-muted-hover hover:text-foreground rounded-sm disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                                  <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
                                                  <svg class="shrink-0 size-4 hidden" 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="18" height="18" x="3" y="3" rx="2"/><path d="M8 12h8"/></svg>
                                                </button>
                                                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                                  Mark this notification as read
                                                </span>
                                              </div>
                                              <div class="hs-tooltip relative inline-block">
                                                <button type="button" class="hs-tooltip-toggle size-7 flex shrink-0 justify-center items-center text-muted-foreground-1 hover:bg-muted-hover hover:text-foreground rounded-sm disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                                  <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"><rect width="20" height="5" x="2" y="4" rx="2"/><path d="M4 9v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9"/><path d="M10 13h4"/></svg>
                                                </button>
                                                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                                  Archive this notification
                                                </span>
                                              </div>
                                            </div>
                                          </div>
                                          
                                        </div>
                                      </div>
                                    </li>

<li class="relative group w-full flex gap-x-5 text-start  p-5">
                                      <div class="relative shrink-0">
                                        <span class="flex shrink-0 justify-center items-center size-9.5 bg-layer border border-layer-line text-layer-foreground text-sm font-semibold rounded-full shadow-2xs">
                                          P
                                        </span>
                                      </div>
                                      <div class="grow">
                                        <p class="text-xs text-muted-foreground-1">
                                          5 Jan 2023
                                        </p>
                                        
                                        <span class="block text-sm font-medium text-foreground">
                                          New Update on Preline
                                        </span>
                                        <p class="text-sm text-muted-foreground-1">
                                          Add yourself to our new “Hire Page”. Let visitors know you’re open to freelance or full-time work.
                                        </p>
                                        <a class="mt-2 p-1.5 inline-flex items-center border border-card-line rounded-xl hover:bg-layer-hover hover:shadow-2xs focus:outline-hidden focus:bg-layer-focus" href="#">
                                          <img class="w-17.5 h-15.5 object-cover rounded-lg" src="https://images.unsplash.com/photo-1670272505340-d906d8d77d03?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" alt="Avatar">
                                          <div class="grow py-2.5 px-4">
                                            <p class="text-sm font-medium text-foreground">
                                              Get hired!
                                            </p>
                                            <p class="inline-flex items-center gap-x-1 text-sm text-muted-foreground-1">
                                              Get started
                                              <svg class="shrink-0 size-4 transition ease-in-out group-hover:translate-x-1 group-focus:translate-x-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="m9 18 6-6-6-6"/></svg>
                                            </p>
                                          </div>
                                        </a>
                                      </div>
  
                                      <div>
                                        <div class="sm:group-hover:opacity-100 sm:opacity-0 sm:absolute sm:top-5 sm:inset-e-5">
                                          
                                          <div class="inline-block p-0.5 bg-card border border-card-line rounded-lg shadow-2xs transition ease-out">    
                                            <div class="flex items-center">
                                              <div class="hs-tooltip relative inline-block">
                                                <button type="button" class="hs-tooltip-toggle size-7 flex shrink-0 justify-center items-center text-muted-foreground-1 hover:bg-muted-hover hover:text-foreground rounded-sm disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                                  <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
                                                  <svg class="shrink-0 size-4 hidden" 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="18" height="18" x="3" y="3" rx="2"/><path d="M8 12h8"/></svg>
                                                </button>
                                                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                                  Mark this notification as read
                                                </span>
                                              </div>
                                              <div class="hs-tooltip relative inline-block">
                                                <button type="button" class="hs-tooltip-toggle size-7 flex shrink-0 justify-center items-center text-muted-foreground-1 hover:bg-muted-hover hover:text-foreground rounded-sm disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                                  <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"><rect width="20" height="5" x="2" y="4" rx="2"/><path d="M4 9v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9"/><path d="M10 13h4"/></svg>
                                                </button>
                                                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                                  Archive this notification
                                                </span>
                                              </div>
                                            </div>
                                          </div>
                                          
                                        </div>
                                      </div>
                                    </li>

<li class="relative group w-full flex gap-x-5 text-start  p-5">
                                      <div class="relative shrink-0">
                                        <span class="flex shrink-0 justify-center items-center size-9.5 bg-layer border border-layer-line text-layer-foreground text-sm font-semibold rounded-full shadow-2xs">
                                          P
                                        </span>
                                      </div>
                                      <div class="grow">
                                        <p class="text-xs text-muted-foreground-1">
                                          5 Jan 2023
                                        </p>
                                        
                                        <span class="block text-sm font-medium text-foreground">
                                          We’re updating our Privacy Policy as of 10th January 2023.content
                                        </span>
                                        <p>
                                          <a class="inline-flex items-center gap-x-1 text-sm text-primary decoration-2 hover:underline font-medium focus:outline-hidden focus:underline" href="#">
                                            Learn more
                                            <svg class="shrink-0 size-4 transition ease-in-out group-hover:translate-x-1 group-focus:translate-x-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="m9 18 6-6-6-6"/></svg>
                                          </a>
                                        </p>
                                      </div>
  
                                      <div>
                                        <div class="sm:group-hover:opacity-100 sm:opacity-0 sm:absolute sm:top-5 sm:inset-e-5">
                                          
                                          <div class="inline-block p-0.5 bg-card border border-card-line rounded-lg shadow-2xs transition ease-out">    
                                            <div class="flex items-center">
                                              <div class="hs-tooltip relative inline-block">
                                                <button type="button" class="hs-tooltip-toggle size-7 flex shrink-0 justify-center items-center text-muted-foreground-1 hover:bg-muted-hover hover:text-foreground rounded-sm disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                                  <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
                                                  <svg class="shrink-0 size-4 hidden" 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="18" height="18" x="3" y="3" rx="2"/><path d="M8 12h8"/></svg>
                                                </button>
                                                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                                  Mark this notification as read
                                                </span>
                                              </div>
                                              <div class="hs-tooltip relative inline-block">
                                                <button type="button" class="hs-tooltip-toggle size-7 flex shrink-0 justify-center items-center text-muted-foreground-1 hover:bg-muted-hover hover:text-foreground rounded-sm disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                                  <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"><rect width="20" height="5" x="2" y="4" rx="2"/><path d="M4 9v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9"/><path d="M10 13h4"/></svg>
                                                </button>
                                                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                                  Archive this notification
                                                </span>
                                              </div>
                                            </div>
                                          </div>
                                          
                                        </div>
                                      </div>
                                    </li>

<li class="relative group w-full flex gap-x-5 text-start bg-surface p-5">
                                      <div class="relative shrink-0">
                                        <img class="shrink-0 size-9.5 rounded-full" src="https://images.unsplash.com/photo-1614880353165-e56fac2ea9a8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">
                                        <span class="absolute top-4 -inset-s-3 size-2 bg-primary rounded-full"></span>
                                      </div>
                                      <div class="grow">
                                        <p class="text-xs text-muted-foreground-1">
                                          31 Dec 2022
                                        </p>
                                        
                                        <span class="block text-sm font-medium text-foreground">
                                          Rubia Walter
                                        </span>
                                        <p class="text-sm text-muted-foreground-1">
                                          Joined the Slack group HS Team
                                        </p>
                                      </div>
  
                                      <div>
                                        <div class="sm:group-hover:opacity-100 sm:opacity-0 sm:absolute sm:top-5 sm:inset-e-5">
                                          
                                          <div class="inline-block p-0.5 bg-card border border-card-line rounded-lg shadow-2xs transition ease-out">    
                                            <div class="flex items-center">
                                              <div class="hs-tooltip relative inline-block">
                                                <button type="button" class="hs-tooltip-toggle size-7 flex shrink-0 justify-center items-center text-muted-foreground-1 hover:bg-muted-hover hover:text-foreground rounded-sm disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                                  <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
                                                  <svg class="shrink-0 size-4 hidden" 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="18" height="18" x="3" y="3" rx="2"/><path d="M8 12h8"/></svg>
                                                </button>
                                                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                                  Mark this notification as read
                                                </span>
                                              </div>
                                              <div class="hs-tooltip relative inline-block">
                                                <button type="button" class="hs-tooltip-toggle size-7 flex shrink-0 justify-center items-center text-muted-foreground-1 hover:bg-muted-hover hover:text-foreground rounded-sm disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                                  <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"><rect width="20" height="5" x="2" y="4" rx="2"/><path d="M4 9v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9"/><path d="M10 13h4"/></svg>
                                                </button>
                                                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                                  Archive this notification
                                                </span>
                                              </div>
                                            </div>
                                          </div>
                                          
                                        </div>
                                      </div>
                                    </li>
                                    
                                  </ul>
                                  
                                </div>

<div class="text-center border-t border-dropdown-divider">
                                  <a class="p-4 flex justify-center items-center gap-x-2 text-sm text-muted-foreground-1 font-medium sm:rounded-b-lg hover:text-primary-hover focus:outline-hidden focus:text-primary-hover" href="#">
                                    <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 7 17l-5-5"/><path d="m22 10-7.5 7.5L13 16"/></svg>
                                    Mark all as read
                                  </a>
                                </div>
                                
                              </div>

<div id="hs-pro-tabs-dnn-archived" class="hidden" role="tabpanel" aria-labelledby="hs-pro-tabs-dnn-item-archived">
                                
                                <div class="p-5 min-h-134 flex flex-col justify-center items-center text-center">
                                  <svg class="w-48 mx-auto mb-4" width="178" height="90" viewBox="0 0 178 90" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <rect x="27" y="50.5" width="124" height="39" rx="7.5" fill="currentColor" class="fill-layer opacity-30"/>
                                    <rect x="27" y="50.5" width="124" height="39" rx="7.5" stroke="currentColor" class="stroke-line-1 opacity-30"/>
                                    <rect x="34.5" y="58" width="24" height="24" rx="4" fill="currentColor" class="fill-surface-1 opacity-30"/>
                                    <rect x="66.5" y="61" width="60" height="6" rx="3" fill="currentColor" class="fill-surface-1 opacity-30"/>
                                    <rect x="66.5" y="73" width="77" height="6" rx="3" fill="currentColor" class="fill-surface-1 opacity-30"/>
                                    <rect x="19.5" y="28.5" width="139" height="39" rx="7.5" fill="currentColor" class="fill-layer"/>
                                    <rect x="19.5" y="28.5" width="139" height="39" rx="7.5" stroke="currentColor" class="stroke-line-1"/>
                                    <rect x="27" y="36" width="24" height="24" rx="4" fill="currentColor" class="fill-surface-1"/>
                                    <rect x="59" y="39" width="60" height="6" rx="3" fill="currentColor" class="fill-surface-1"/>
                                    <rect x="59" y="51" width="92" height="6" rx="3" fill="currentColor" class="fill-surface-1"/>
                                    <g filter="url(#filter15)">
                                    <rect x="12" y="6" width="154" height="40" rx="8" fill="currentColor" class="fill-layer" shape-rendering="crispEdges"/>
                                    <rect x="12.5" y="6.5" width="153" height="39" rx="7.5" stroke="currentColor" class="stroke-line-1" shape-rendering="crispEdges"/>
                                    <rect x="20" y="14" width="24" height="24" rx="4" fill="currentColor" class="fill-surface-1"/>
                                    <rect x="52" y="17" width="60" height="6" rx="3" fill="currentColor" class="fill-surface-1"/>
                                    <rect x="52" y="29" width="106" height="6" rx="3" fill="currentColor" class="fill-surface-1"/>
                                    </g>
                                    <defs>
                                    <filter id="filter15" x="0" y="0" width="178" height="64" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                                    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
                                    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
                                    <feOffset dy="6"/>
                                    <feGaussianBlur stdDeviation="6"/>
                                    <feComposite in2="hardAlpha" operator="out"/>
                                    <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0"/>
                                    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1187_14810"/>
                                    <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1187_14810" result="shape"/>
                                    </filter>
                                    </defs>
                                  </svg>

<div class="max-w-sm mx-auto">
                                    <p class="mt-2 font-medium text-foreground">
                                      No archived notifications
                                    </p>
                                    <p class="mb-5 text-sm text-muted-foreground-1">
                                      No data here yet. We will notify you when there's an update.
                                    </p>
                                  </div>

<a class="py-2 px-3 inline-flex items-center gap-x-2 text-xs 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="#">
                                    Notifications settings
                                  </a>
                                </div>
                                
                              </div>
                              
                            </div>
                          </div>

<div class="hs-tooltip [--placement:bottom] inline-block">
                            <button type="button" class="hs-tooltip-toggle size-9.5 inline-flex justify-center items-center gap-x-2 rounded-full 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" data-hs-overlay="#hs-pro-dnam">
                              <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="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
                            </button>
                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                              Activity
                            </span>
                          </div>
                          
                        </div>

<div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
                          <button id="hs-pro-dnshd" type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                            Share
                          </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-full sm:w-120 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border-t border-dropdown-line sm:border sm:rounded-lg shadow-md sm:shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dnshd">
                            
                            <div class="p-4 border-b border-dropdown-divider">
                              <span class="block mb-2 text-[13px] font-medium text-foreground">
                                Invite
                              </span>

<div class="flex items-center gap-x-2">
                                <div class="relative w-full">
                                  <input type="text" class="py-1.5 sm:py-2 px-3 pe-24 block w-full bg-transparent border-layer-line rounded-lg sm:text-sm text-layer-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus" placeholder="Add name or emails">
                                  <div class="absolute inset-y-0 inset-e-0 flex items-center pe-2 z-20">
                                    
                                    <div class="relative inline-block">
                                      <select id="hs-pro-select-mini-dropdown" 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-1.5 ps-2.5 pe-6 inline-flex shrink-0 justify-center items-center gap-x-1.5 text-xs text-foreground rounded-md hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus before:absolute before:inset-0 before:z-1",
                                          
                                          "dropdownClasses": "inset-e-0 mt-2 z-50 w-28 p-1 space-y-0.5 bg-select-1 border border-select-line rounded-xl shadow-xl",
                                          "optionClasses": "hs-selected:bg-select-item-active py-1.5 px-2 w-full text-xs text-select-item-foreground rounded-lg cursor-pointer hover:bg-select-item-hover 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-1.5 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 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 9 6 6 6-6\"/></svg></div>"
                                        }' class="hidden">
                                        <option value="">Choose</option>
                                        <option selected>Can view</option>
                                        <option>Can edit</option>
                                        <option>Admin</option>
                                      </select>
                                    </div>
                                    
                                  </div>
                                </div>

<div class="flex mt-2">
                                <input type="checkbox" class="shrink-0 size-3.5 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-dnshdch" checked>
                                <label for="hs-pro-dnshdch" class="ms-1.5 text-xs text-muted-foreground-1">
                                  Notify recipients via email
                                </label>
                              </div>
                            </div>

<div id="hs-dropdown-share-body" class="p-4 space-y-4 h-82 overflow-y-auto overflow-hidden [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                              <span class="block text-[13px] font-medium text-foreground">
                                From Htmlstream
                              </span>

<div class="w-full 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-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">
                                <div class="grow">
                                  <span class="block text-sm font-medium text-foreground">
                                    James Collison <span class="text-xs font-normal text-muted-foreground-1">(you)</span>
                                  </span>
                                  <span class="block text-[13px] text-muted-foreground-1">
                                    james@site.com
                                  </span>
                                </div>

<div class="relative">
                                  <select 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-1.5 ps-2.5 pe-6 inline-flex shrink-0 justify-center items-center gap-x-1.5 text-xs text-foreground rounded-lg hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus before:absolute before:inset-0 before:z-1",
                                      "dropdownClasses": "inset-e-0 mt-2 z-50 w-28 p-1 space-y-0.5 bg-select-1 border border-select-line rounded-xl shadow-xl",
                                      "optionClasses": "hs-selected:bg-select-item-active py-1.5 px-2 w-full text-xs text-select-item-foreground rounded-lg cursor-pointer hover:bg-select-item-hover 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-1.5 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 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 9 6 6 6-6\"/></svg></div>",
                                      "viewport": "#hs-dropdown-share-body"
                                    }' class="hidden">
                                    <option value="">Choose</option>
                                    <option>Can view</option>
                                    <option>Can edit</option>
                                    <option selected>Admin</option>
                                    <option>Remove</option>
                                  </select>
                                </div>
                                
                              </div>

<div class="w-full 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-muted-foreground-1 text-sm font-semibold rounded-full shadow-2xs">
                                  L
                                </span>
                                <div class="grow">
                                  <span class="block text-sm font-medium text-foreground">
                                    Liza Harrison
                                  </span>
                                  <span class="block text-[13px] text-muted-foreground-1">
                                    liza@site.com
                                  </span>
                                </div>

<div class="relative">
                                  <select 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-1.5 ps-2.5 pe-6 inline-flex shrink-0 justify-center items-center gap-x-1.5 text-xs text-foreground rounded-lg hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus before:absolute before:inset-0 before:z-1",
                                      "dropdownClasses": "inset-e-0 mt-2 z-50 w-28 p-1 space-y-0.5 bg-select-1 border border-select-line rounded-xl shadow-xl",
                                      "optionClasses": "hs-selected:bg-select-item-active py-1.5 px-2 w-full text-xs text-select-item-foreground rounded-lg cursor-pointer hover:bg-select-item-hover 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-1.5 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 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 9 6 6 6-6\"/></svg></div>",
                                      "viewport": "#hs-dropdown-share-body"
                                    }' class="hidden">
                                    <option value="">Choose</option>
                                    <option selected>Can view</option>
                                    <option>Can edit</option>
                                    <option>Admin</option>
                                    <option>Remove</option>
                                  </select>
                                </div>
                                
                              </div>

<div class="w-full 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=3&w=320&h=320&q=80" alt="Avatar">
                                <div class="grow">
                                  <span class="block text-sm font-medium text-foreground">
                                    Daniel Hobbs
                                  </span>
                                  <span class="block text-[13px] text-muted-foreground-1">
                                    dhobbs@site.com
                                  </span>
                                </div>

<div class="relative">
                                  <select 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-1.5 ps-2.5 pe-6 inline-flex shrink-0 justify-center items-center gap-x-1.5 text-xs text-foreground rounded-lg hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus before:absolute before:inset-0 before:z-1",
                                      "dropdownClasses": "inset-e-0 mt-2 z-50 w-28 p-1 space-y-0.5 bg-select-1 border border-select-line rounded-xl shadow-xl",
                                      "optionClasses": "hs-selected:bg-select-item-active py-1.5 px-2 w-full text-xs text-select-item-foreground rounded-lg cursor-pointer hover:bg-select-item-hover 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-1.5 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 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 9 6 6 6-6\"/></svg></div>",
                                      "viewport": "#hs-dropdown-share-body"
                                    }' class="hidden">
                                    <option value="">Choose</option>
                                    <option>Can view</option>
                                    <option selected>Can edit</option>
                                    <option>Admin</option>
                                    <option>Remove</option>
                                  </select>
                                </div>
                                
                              </div>

<button type="button" class="hs-collapse-toggle hs-collapse-open:hidden w-full text-start flex items-center gap-x-3 rounded-lg hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" id="hs-pro-dshdc-item-button" aria-expanded="false" aria-controls="hs-pro-dshdc-button" data-hs-collapse="#hs-pro-dshdc-button">
                                <span class="flex shrink-0 justify-center items-center size-9.5 text-sm font-semibold text-muted-foreground-1 rounded-lg">
                                  <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                    <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
                                  </svg>
                                </span>

<span class="grow">
                                  <span class="text-xs text-muted-foreground-1">
                                    2 more people
                                  </span>
                                </span>
                              </button>

<div id="hs-pro-dshdc-button" class="hs-collapse hidden w-full transition-none space-y-4" aria-labelledby="hs-pro-dshdc-item-button" role="region">
                                
                                <div class="w-full 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-muted-foreground-1 text-sm font-semibold rounded-full shadow-2xs">
                                    O
                                  </span>
                                  <div class="grow">
                                    <span class="block text-sm font-medium text-foreground">
                                      Ols Shols
                                    </span>
                                    <span class="block text-[13px] text-muted-foreground-1">
                                      ols@site.com
                                    </span>
                                  </div>

<div class="relative">
                                    <select 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-1.5 ps-2.5 pe-6 inline-flex shrink-0 justify-center items-center gap-x-1.5 text-xs text-foreground rounded-lg hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus before:absolute before:inset-0 before:z-1",
                                        "dropdownClasses": "inset-e-0 mt-2 z-50 w-28 p-1 space-y-0.5 bg-select-1 border border-select-line rounded-xl shadow-xl",
                                        "optionClasses": "hs-selected:bg-select-item-active py-1.5 px-2 w-full text-xs text-select-item-foreground rounded-lg cursor-pointer hover:bg-select-item-hover 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-1.5 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 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 9 6 6 6-6\"/></svg></div>",
                                        "viewport": "#hs-dropdown-share-body"
                                      }' class="hidden">
                                      <option value="">Choose</option>
                                      <option>Can view</option>
                                      <option selected>Can edit</option>
                                      <option>Admin</option>
                                      <option>Remove</option>
                                    </select>
                                  </div>
                                  
                                </div>

<div class="w-full 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-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">
                                  <div class="grow">
                                    <span class="block text-sm font-medium text-foreground">
                                      Crane
                                    </span>
                                    <span class="block text-[13px] text-muted-foreground-1">
                                      crane@site.com
                                    </span>
                                  </div>

<div class="relative">
                                    <select 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-1.5 ps-2.5 pe-6 inline-flex shrink-0 justify-center items-center gap-x-1.5 text-xs text-foreground rounded-lg hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus before:absolute before:inset-0 before:z-1",
                                        "dropdownClasses": "inset-e-0 mt-2 z-50 w-28 p-1 space-y-0.5 bg-select-1 border border-select-line rounded-xl shadow-xl",
                                        "optionClasses": "hs-selected:bg-select-item-active py-1.5 px-2 w-full text-xs text-select-item-foreground rounded-lg cursor-pointer hover:bg-select-item-hover 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-1.5 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 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 9 6 6 6-6\"/></svg></div>",
                                        "viewport": "#hs-dropdown-share-body"
                                      }' class="hidden">
                                      <option value="">Choose</option>
                                      <option selected>Can view</option>
                                      <option>Can edit</option>
                                      <option>Admin</option>
                                      <option>Remove</option>
                                    </select>
                                  </div>
                                  
                                </div>
                                
                              </div>

<div class="w-full 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=3&w=320&h=320&q=80" alt="Avatar">
                                <div class="grow">
                                  <span class="block text-sm font-medium text-foreground">
                                    Anna Richard
                                  </span>
                                  <span class="block text-[13px] text-muted-foreground-1">
                                    anna@site.com
                                  </span>
                                </div>

<div class="relative">
                                  <select 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-1.5 ps-2.5 pe-6 inline-flex shrink-0 justify-center items-center gap-x-1.5 text-xs text-foreground rounded-lg hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus before:absolute before:inset-0 before:z-1",
                                      "dropdownClasses": "inset-e-0 mt-2 z-50 w-28 p-1 space-y-0.5 bg-select-1 border border-select-line rounded-xl shadow-xl",
                                      "optionClasses": "hs-selected:bg-select-item-active py-1.5 px-2 w-full text-xs text-select-item-foreground rounded-lg cursor-pointer hover:bg-select-item-hover 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-1.5 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 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 9 6 6 6-6\"/></svg></div>",
                                      "viewport": "#hs-dropdown-share-body"
                                    }' class="hidden">
                                    <option value="">Choose</option>
                                    <option>Can view</option>
                                    <option selected>Can edit</option>
                                    <option>Admin</option>
                                    <option>Remove</option>
                                  </select>
                                </div>
                                
                              </div>
                              
                            </div>

<div class="p-4 border-t border-dropdown-divider">
                              <span class="block mb-2 text-[13px] font-medium text-foreground">
                                Share read-only link
                              </span>

<div class="flex items-center gap-x-2">
                                <input id="hs-pro-share-input-dropdown" type="text" class="py-1.5 sm:py-2 px-3 block w-full bg-transparent border-layer-line text-layer-foreground placeholder:text-muted-foreground-1 rounded-lg sm:text-sm focus:border-primary-focus focus:ring-primary-focus" readonly value="https://www.figma.com/community/file/1179068859697769656">

<div class="p-4 border-t border-dropdown-divider">
                              <a class="inline-flex items-center gap-x-1.5 text-xs text-muted-foreground-1 hover:underline font-medium focus:outline-hidden focus:underline" href="#">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
                                Read more about share
                              </a>
                            </div>
                            
                          </div>
                          
                        </div>

<div class="grow">
                                    <span class="text-sm font-semibold text-foreground">
                                      James Collison
                                    </span>
                                    <p class="text-xs text-muted-foreground-1">
                                      Preline@HS
                                    </p>
                                  </div>
                                </a>
                              </div>
                              <div class="p-1">
                                <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                  <svg class="shrink-0 mt-0.5 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"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>
                                  Billing
                                </a>
                                <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                  <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="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
                                  Settings
                                </a>
                                <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                  <svg class="shrink-0 mt-0.5 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="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                                  My account
                                </a>
                              </div>
                              <div class="px-4 py-3.5 border-y border-dropdown-divider">
                                
                                <div class="flex flex-wrap justify-between items-center gap-2">
                                  <label for="hs-pro-dnaddm" class="flex-1 cursor-pointer text-sm text-foreground">Dark mode</label>
                                  <label for="hs-pro-dnaddm" class="relative inline-block w-11 h-6 cursor-pointer">
                                    <input data-hs-theme-switch type="checkbox" id="hs-pro-dnaddm" 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>
                              <div class="p-1">
                                <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                  Customization
                                  <div class="ms-auto">
                                    <span class="ms-auto inline-flex items-center gap-1.5 py-px px-1.5 rounded-sm text-[10px] leading-4 font-medium bg-surface text-surface-foreground">
                                      New
                                    </span>
                                  </div>
                                </a>
                                <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                  Manage team
                                </a>
                                <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                  Sign out
                                </a>
                              </div>
                              <div class="p-1 border-t border-dropdown-divider">
                                <button type="button" class="flex mt-0.5 gap-x-3 py-2 px-3 w-full rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" data-hs-overlay="#hs-pro-dasadam">
                                  <svg class="shrink-0 size-4 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="12" cy="12" r="10"/><path d="M8 12h8"/><path d="M12 8v8"/></svg>
                                  Add team account
                                </button>
                              </div>
                            </div>
                            
                          </div>
                          
                        </div>
                      </div>
                    </div>
                  </header>

<aside id="hs-pro-sidebar" class="hs-overlay [--auto-close:lg]
                    hs-overlay-open:translate-x-0
                    -translate-x-full transition-all duration-300 transform
                    w-65 h-full
                    hidden
                    fixed inset-y-0 inset-s-0 z-60
                    bg-sidebar border-e border-sidebar-line
                    lg:block lg:translate-x-0 lg:inset-e-auto lg:bottom-0" tabindex="-1" aria-label="Sidebar">
                    <div class="relative flex flex-col h-full max-h-full pt-3">
                      <header class="h-11.5 ps-5 pe-2 lg:ps-8 flex items-center gap-x-1">
                        
                        <a class="flex-none rounded-md text-xl inline-block font-semibold focus:outline-hidden focus:opacity-80" href="@@href" aria-label="Preline">
                          <svg class="w-28 h-auto" width="116" height="32" viewBox="0 0 116 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M33.5696 30.8182V11.3182H37.4474V13.7003H37.6229C37.7952 13.3187 38.0445 12.9309 38.3707 12.5369C38.7031 12.1368 39.134 11.8045 39.6634 11.5398C40.1989 11.2689 40.8636 11.1335 41.6577 11.1335C42.6918 11.1335 43.6458 11.4044 44.5199 11.946C45.3939 12.4815 46.0926 13.291 46.6158 14.3743C47.139 15.4515 47.4006 16.8026 47.4006 18.4276C47.4006 20.0095 47.1451 21.3452 46.6342 22.4347C46.1295 23.518 45.4401 24.3397 44.5661 24.8999C43.6982 25.4538 42.7256 25.7308 41.6484 25.7308C40.8852 25.7308 40.2358 25.6046 39.7003 25.3523C39.1709 25.0999 38.737 24.7829 38.3984 24.4013C38.0599 24.0135 37.8014 23.6226 37.6229 23.2287H37.5028V30.8182H33.5696ZM37.4197 18.4091C37.4197 19.2524 37.5367 19.9879 37.7706 20.6158C38.0045 21.2436 38.343 21.733 38.7862 22.0838C39.2294 22.4285 39.768 22.6009 40.402 22.6009C41.0421 22.6009 41.5838 22.4254 42.027 22.0746C42.4702 21.7176 42.8056 21.2251 43.0334 20.5973C43.2673 19.9633 43.3842 19.2339 43.3842 18.4091C43.3842 17.5904 43.2704 16.8703 43.0426 16.2486C42.8149 15.6269 42.4794 15.1406 42.0362 14.7898C41.593 14.4389 41.0483 14.2635 40.402 14.2635C39.7618 14.2635 39.2202 14.4328 38.777 14.7713C38.34 15.1098 38.0045 15.59 37.7706 16.2116C37.5367 16.8333 37.4197 17.5658 37.4197 18.4091ZM49.2427 25.5V11.3182H53.0559V13.7926H53.2037C53.4622 12.9124 53.8961 12.2476 54.5055 11.7983C55.1149 11.3428 55.8166 11.1151 56.6106 11.1151C56.8076 11.1151 57.02 11.1274 57.2477 11.152C57.4754 11.1766 57.6755 11.2105 57.8478 11.2536V14.7436C57.6632 14.6882 57.4077 14.639 57.0815 14.5959C56.7553 14.5528 56.4567 14.5312 56.1859 14.5312C55.6073 14.5312 55.0903 14.6574 54.6348 14.9098C54.1854 15.156 53.8284 15.5007 53.5638 15.9439C53.3052 16.3871 53.176 16.898 53.176 17.4766V25.5H49.2427ZM64.9043 25.777C63.4455 25.777 62.1898 25.4815 61.1373 24.8906C60.0909 24.2936 59.2845 23.4503 58.7182 22.3608C58.1519 21.2652 57.8688 19.9695 57.8688 18.4737C57.8688 17.0149 58.1519 15.7346 58.7182 14.6328C59.2845 13.531 60.0816 12.6723 61.1096 12.0568C62.1437 11.4413 63.3563 11.1335 64.7474 11.1335C65.683 11.1335 66.5539 11.2843 67.3603 11.5859C68.1728 11.8814 68.8806 12.3277 69.4839 12.9247C70.0932 13.5218 70.5672 14.2727 70.9057 15.1776C71.2443 16.0762 71.4135 17.1288 71.4135 18.3352V19.4155H59.4384V16.978H67.7111C67.7111 16.4117 67.588 15.91 67.3418 15.473C67.0956 15.036 66.754 14.6944 66.317 14.4482C65.8861 14.1958 65.3844 14.0696 64.812 14.0696C64.2149 14.0696 63.6856 14.2081 63.2239 14.4851C62.7684 14.7559 62.4114 15.1222 62.1529 15.5838C61.8944 16.0393 61.762 16.5471 61.7559 17.1072V19.4247C61.7559 20.1264 61.8851 20.7327 62.1437 21.2436C62.4083 21.7545 62.7807 22.1484 63.2608 22.4254C63.741 22.7024 64.3103 22.8409 64.9689 22.8409C65.406 22.8409 65.8061 22.7794 66.1692 22.6562C66.5324 22.5331 66.8432 22.3485 67.1018 22.1023C67.3603 21.8561 67.5572 21.5545 67.6927 21.1974L71.3304 21.4375C71.1458 22.3116 70.7672 23.0748 70.1948 23.7273C69.6285 24.3736 68.896 24.8783 67.9974 25.2415C67.1048 25.5985 66.0738 25.777 64.9043 25.777ZM77.1335 6.59091V25.5H73.2003V6.59091H77.1335ZM79.5043 25.5V11.3182H83.4375V25.5H79.5043ZM81.4801 9.49006C80.8954 9.49006 80.3937 9.29616 79.9752 8.90838C79.5628 8.51444 79.3566 8.04356 79.3566 7.49574C79.3566 6.95407 79.5628 6.48935 79.9752 6.10156C80.3937 5.70762 80.8954 5.51065 81.4801 5.51065C82.0649 5.51065 82.5635 5.70762 82.9759 6.10156C83.3944 6.48935 83.6037 6.95407 83.6037 7.49574C83.6037 8.04356 83.3944 8.51444 82.9759 8.90838C82.5635 9.29616 82.0649 9.49006 81.4801 9.49006ZM89.7415 17.3011V25.5H85.8083V11.3182H89.5569V13.8203H89.723C90.037 12.9955 90.5632 12.343 91.3019 11.8629C92.0405 11.3767 92.9361 11.1335 93.9887 11.1335C94.9735 11.1335 95.8322 11.349 96.5647 11.7798C97.2971 12.2107 97.8665 12.8262 98.2728 13.6264C98.679 14.4205 98.8821 15.3684 98.8821 16.4702V25.5H94.9489V17.1719C94.9551 16.304 94.7335 15.6269 94.2841 15.1406C93.8348 14.6482 93.2162 14.402 92.4283 14.402C91.8989 14.402 91.4311 14.5159 91.0249 14.7436C90.6248 14.9714 90.3109 15.3037 90.0831 15.7408C89.8615 16.1716 89.7477 16.6918 89.7415 17.3011ZM107.665 25.777C106.206 25.777 104.951 25.4815 103.898 24.8906C102.852 24.2936 102.045 23.4503 101.479 22.3608C100.913 21.2652 100.63 19.9695 100.63 18.4737C100.63 17.0149 100.913 15.7346 101.479 14.6328C102.045 13.531 102.842 12.6723 103.87 12.0568C104.905 11.4413 106.117 11.1335 107.508 11.1335C108.444 11.1335 109.315 11.2843 110.121 11.5859C110.934 11.8814 111.641 12.3277 112.245 12.9247C112.854 13.5218 113.328 14.2727 113.667 15.1776C114.005 16.0762 114.174 17.1288 114.174 18.3352V19.4155H102.199V16.978H110.472C110.472 16.4117 110.349 15.91 110.103 15.473C109.856 15.036 109.515 14.6944 109.078 14.4482C108.647 14.1958 108.145 14.0696 107.573 14.0696C106.976 14.0696 106.446 14.2081 105.985 14.4851C105.529 14.7559 105.172 15.1222 104.914 15.5838C104.655 16.0393 104.523 16.5471 104.517 17.1072V19.4247C104.517 20.1264 104.646 20.7327 104.905 21.2436C105.169 21.7545 105.542 22.1484 106.022 22.4254C106.502 22.7024 107.071 22.8409 107.73 22.8409C108.167 22.8409 108.567 22.7794 108.93 22.6562C109.293 22.5331 109.604 22.3485 109.863 22.1023C110.121 21.8561 110.318 21.5545 110.454 21.1974L114.091 21.4375C113.907 22.3116 113.528 23.0748 112.956 23.7273C112.389 24.3736 111.657 24.8783 110.758 25.2415C109.866 25.5985 108.835 25.777 107.665 25.777Z" class="fill-primary" fill="currentColor"/>
                            <path d="M1 29.5V16.5C1 9.87258 6.37258 4.5 13 4.5C19.6274 4.5 25 9.87258 25 16.5C25 23.1274 19.6274 28.5 13 28.5H12" class="stroke-primary" stroke="currentColor" stroke-width="2"/>
                            <path d="M5 29.5V16.66C5 12.1534 8.58172 8.5 13 8.5C17.4183 8.5 21 12.1534 21 16.66C21 21.1666 17.4183 24.82 13 24.82H12" class="stroke-primary" stroke="currentColor" stroke-width="2"/>
                            <circle cx="13" cy="16.5214" r="5" class="fill-primary" fill="currentColor"/>
                          </svg>
                        </a>

<div class="mt-1.5 h-full overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                        
                        <nav class="hs-accordion-group pb-3  w-full flex flex-col flex-wrap" data-hs-accordion-always-open>
                          <ul class="flex flex-col gap-y-1">
                            
                            <li class="px-2 lg:px-5">
                              <a class="flex gap-x-3 py-2 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus  " href="../../../templates/dashboards/admin-dashboard/index.html">
                                <svg class="shrink-0 mt-0.5 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="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
                                Dashboard
                              </a>
                            </li>

<li class="hs-accordion px-2 lg:px-5  " id="users-accordion">
                              <button type="button" class="hs-accordion-toggle hs-accordion-active:bg-sidebar-nav-active w-full text-start flex gap-x-3 py-2 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-sidebar-nav-focus" aria-expanded="false" aria-controls="users-accordion-sub">
                                <svg class="shrink-0 mt-0.5 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>
                                Users

<div id="users-accordion-sub" class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300" role="region" aria-labelledby="users-accordion"  style="display: none;">
                                <ul class="hs-accordion-group ps-7 mt-1 flex flex-col gap-y-1 relative before:absolute before:top-0 before:inset-s-4.5 before:w-px before:h-full before:bg-sidebar-nav-list-divider" data-hs-accordion-always-open>
                                  <li>
                                    <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus  " href="../../../templates/dashboards/admin-dashboard/users.html">
                                      Overview
                                    </a>
                                  </li>
                                  <li>
                                    <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus  " href="../../../templates/dashboards/admin-dashboard/users-add-user.html">
                                      Add User
                                    </a>
                                  </li>
                                </ul>
                              </div>
                            </li>

<li class="hs-accordion px-2 lg:px-5  " id="user-profile-accordion">
                              <button type="button" class="hs-accordion-toggle hs-accordion-active:bg-sidebar-nav-active w-full text-start flex gap-x-3 py-2 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-sidebar-nav-focus" aria-expanded="false" aria-controls="user-profile-accordion-sub">
                                <svg class="shrink-0 mt-0.5 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"/><circle cx="12" cy="10" r="3"/><path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"/></svg>
                                User Profile

<div id="user-profile-accordion-sub" class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300" role="region" aria-labelledby="user-profile-accordion"  style="display: none;">
                                <ul class="hs-accordion-group ps-7 mt-1 flex flex-col gap-y-1 relative before:absolute before:top-0 before:inset-s-4.5 before:w-px before:h-full before:bg-sidebar-nav-list-divider" data-hs-accordion-always-open>
                                  <li>
                                    <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus  " href="../../../templates/dashboards/admin-dashboard/user-profile-my-profile.html">
                                      My Profile
                                    </a>
                                  </li>
                                  <li>
                                    <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus  " href="../../../templates/dashboards/admin-dashboard/user-profile-teams.html">
                                      Teams: Grid
                                    </a>
                                  </li>
                                  <li>
                                    <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus  " href="../../../templates/dashboards/admin-dashboard/user-profile-teams-list.html">
                                      Teams: Listing
                                    </a>
                                  </li>
                                  <li>
                                    <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus  " href="../../../templates/dashboards/admin-dashboard/user-profile-files.html">
                                      Files: Grid
                                    </a>
                                  </li>
                                  <li>
                                    <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus  " href="../../../templates/dashboards/admin-dashboard/user-profile-files-list.html">
                                      Files: Listing
                                    </a>
                                  </li>
                                  <li>
                                    <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus  " href="../../../templates/dashboards/admin-dashboard/user-profile-connections.html">
                                      Connections: Grid
                                    </a>
                                  </li>
                                  <li>
                                    <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus  " href="../../../templates/dashboards/admin-dashboard/user-profile-connections-list.html">
                                      Connections: Listing
                                    </a>
                                  </li>
                                  <li>
                                    <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus  " href="../../../templates/dashboards/admin-dashboard/user-profile.html">
                                      Profile
                                    </a>
                                  </li>
                                </ul>
                              </div>
                            </li>

<li class="hs-accordion px-2 lg:px-5  " id="account-accordion">
                              <button type="button" class="hs-accordion-toggle hs-accordion-active:bg-sidebar-nav-active w-full text-start flex gap-x-3 py-2 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-sidebar-nav-focus" aria-expanded="false" aria-controls="account-accordion-sub">
                                <svg class="shrink-0 mt-0.5 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>
                                Account

<div id="account-accordion-sub" class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300" role="region" aria-labelledby="account-accordion"  style="display: none;">
                                <ul class="hs-accordion-group ps-7 mt-1 flex flex-col gap-y-1 relative before:absolute before:top-0 before:inset-s-4.5 before:w-px before:h-full before:bg-sidebar-nav-list-divider" data-hs-accordion-always-open>
                                  <li>
                                    <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus  " href="../../../templates/dashboards/admin-dashboard/account-profile.html">
                                      Profile
                                    </a>
                                  </li>
                                  <li>
                                    <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus  " href="../../../templates/dashboards/admin-dashboard/account-notifications.html">
                                      Notifications
                                    </a>
                                  </li>
                                  <li>
                                    <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus  " href="../../../templates/dashboards/admin-dashboard/account-integrations.html">
                                      Integrations
                                    </a>
                                  </li>
                                  <li>
                                    <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus  " href="../../../templates/dashboards/admin-dashboard/account-preferences.html">
                                      Preferences
                                    </a>
                                  </li>
                                  <li>
                                    <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus  " href="../../../templates/dashboards/admin-dashboard/account-workspace.html">
                                      Workspace
                                    </a>
                                  </li>
                                  <li>
                                    <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus  " href="../../../templates/dashboards/admin-dashboard/account-plan-and-billing.html">
                                      Plan & Billing
                                    </a>
                                  </li>
                                  <li>
                                    <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus  " href="../../../templates/dashboards/admin-dashboard/account-members.html">
                                      Members
                                    </a>
                                  </li>
                                </ul>
                              </div>
                            </li>

<li class="px-2 lg:px-5">
                              <a class="flex gap-x-3 py-2 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus  " href="../../../templates/dashboards/admin-dashboard/welcome-page.html">
                                <svg class="shrink-0 mt-0.5 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="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>
                                Welcome Page
                              </a>
                            </li>

<li class="px-2 lg:px-5">
                              <a class="flex gap-x-3 py-2 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus  " href="../../../templates/dashboards/admin-dashboard/empty-states.html">
                                <svg class="shrink-0 mt-0.5 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 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg>
                                Empty Contents
                              </a>
                            </li>

<li class="px-2 lg:px-5">
                              <a class="flex gap-x-3 py-2 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus  " href="../../../templates/dashboards/admin-dashboard/plans.html">
                                <svg class="shrink-0 mt-0.5 size-4 text-primary" 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="m16 12-4-4-4 4"/><path d="M12 16V8"/></svg>
                                <span class="bg-clip-text bg-linear-to-tr from-chart-primary to-chart-5 to-80% text-transparent">
                                  Plans
                                </span>
                              </a>
                            </li>

<li class="pt-5 px-5 lg:px-8 mt-5 border-t border-sidebar-divider first:border-transparent first:pt-0">
                              <span class="block text-xs uppercase text-muted-foreground-1">
                                Apps
                              </span>
                            </li>

<li class="px-2 lg:px-5">
                              <a class="flex items-center gap-x-2 py-1.5 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus " href="../../../templates/dashboards/admin-dashboard/chat.html">
                                <span class="flex justify-center items-center size-6 bg-primary text-primary-foreground rounded-md">
                                  <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="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                                </span>
                                Chat
                              </a>
                            </li>

<li class="px-2 lg:px-5">
                              <a class="flex items-center gap-x-2 py-1.5 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus " href="../../../templates/dashboards/admin-dashboard/inbox.html">
                                <span class="flex justify-center items-center size-6 bg-primary text-primary-foreground rounded-md">
                                  <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"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg>
                                </span>
                                Inbox
                              </a>
                            </li>

<li class="px-2 lg:px-5">
                              <a class="flex items-center gap-x-2 py-1.5 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus " href="../../../templates/dashboards/admin-dashboard/calendar-month.html">
                                <span class="flex justify-center items-center size-6 bg-primary text-primary-foreground rounded-md">
                                  <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="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></svg>
                                </span>
                                Calendars
                              </a>
                            </li>

<li class="px-2 lg:px-5">
                              <a class="flex items-center gap-x-2 py-1.5 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus " href="../../../templates/dashboards/admin-dashboard/kanban-board.html">
                                <span class="flex justify-center items-center size-6 bg-primary text-primary-foreground rounded-md">
                                  <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M8 7v7"/><path d="M12 7v4"/><path d="M16 7v9"/></svg>
                                </span>
                                Kanban Board
                              </a>
                            </li>

<li class="px-2 lg:px-5">
                              <a class="flex items-center gap-x-2 py-1.5 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus " href="../../../templates/dashboards/admin-dashboard/files.html">
                                <span class="flex justify-center items-center size-6 bg-primary text-primary-foreground rounded-md">
                                  <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="m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"/></svg>
                                </span>
                                Files
                              </a>
                            </li>

<li class="px-2 lg:px-5">
                              <a class="flex items-center gap-x-2 py-1.5 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus " href="../../../templates/dashboards/admin-dashboard/to-do.html">
                                <span class="flex justify-center items-center size-6 bg-primary text-primary-foreground rounded-md">
                                  <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="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/><path d="m9 16 2 2 4-4"/></svg>
                                </span>
                                To Do
                              </a>
                            </li>
                            
                          </ul>
                        </nav>
                        
                      </div>

<footer class="hidden lg:block border-t border-sidebar-divider">
                        
                        <div class="px-7 ">
                          <div class="hs-dropdown [--auto-close:inside] relative flex">
                            
                            <button id="hs-pro-dnwpd-footer" type="button" class="group w-full inline-flex items-center py-3 text-start text-foreground align-middle disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                              <svg class=" size-8 shrink-0" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M11.7438 0.940745C6.84695 1.30308 2.6841 1.63631 2.48837 1.67533C1.9396 1.77319 1.44038 2.14544 1.20563 2.63537L1 3.06646L1.01982 13.3407L1.04893 23.615L1.36234 24.2517C1.53886 24.6042 2.73365 26.2499 4.0362 27.9439C6.61221 31.2836 6.79802 31.47 7.77726 31.5679C8.06156 31.597 10.1966 31.4991 12.5081 31.3622C14.8295 31.2154 18.5508 30.99 20.7842 30.863C30.3233 30.2839 29.8334 30.3328 30.3815 29.8627C31.0672 29.2947 31.0183 30.2251 31.0474 17.7377C31.0672 7.15003 31.0573 6.45509 30.9006 6.13177C30.7148 5.76943 30.3815 5.51487 26.0329 2.45885C23.1243 0.421704 22.9186 0.313932 21.6155 0.294111C21.0772 0.274911 16.6307 0.568497 11.7438 0.940745ZM22.752 2.28232C23.1633 2.46814 26.1704 4.56412 26.6108 4.9661C26.7284 5.08378 26.7675 5.18164 26.7086 5.24048C26.5717 5.35817 7.96245 6.465 7.42421 6.38634C7.17956 6.34732 6.81722 6.20052 6.61159 6.06302C5.75932 5.48514 3.64413 3.75149 3.64413 3.62452C3.64413 3.29129 3.57538 3.29129 11.8714 2.69421C13.4582 2.58644 16.0633 2.39071 17.6502 2.26312C21.0871 1.98874 22.1159 1.99865 22.752 2.28232ZM28.6677 7.63996C28.8046 7.77685 28.9223 8.04132 28.9613 8.29589C28.9904 8.53125 29.0102 12.9189 28.9904 18.0313C28.9613 26.8067 28.9514 27.3555 28.7848 27.61C28.6869 27.7667 28.4912 27.9333 28.3438 27.9823C27.9331 28.1489 8.43318 29.2557 8.03183 29.138C7.84601 29.0891 7.59083 28.9324 7.45394 28.7955L7.21858 28.541L7.18947 19.0799C7.16965 12.4395 7.18947 9.5012 7.26813 9.23672C7.32697 9.041 7.47376 8.80564 7.60136 8.72759C7.77788 8.60991 8.93364 8.51205 12.9101 8.2773C15.7016 8.1206 20.0206 7.85613 22.4987 7.70933C28.3933 7.34638 28.3741 7.34638 28.6677 7.63996Z" class="fill-foreground" fill="currentColor"/>
                                <path d="M23.4277 10.8818C22.3698 10.9506 21.4296 11.0484 21.3218 11.1073C20.9985 11.2739 20.8028 11.5483 20.7638 11.8617C20.7347 12.185 20.8325 12.224 21.8898 12.3516L22.35 12.4104V16.5925C22.35 19.0799 22.311 20.7256 22.2621 20.6767C22.2131 20.6178 20.8226 18.5027 19.167 15.9756C17.512 13.4392 16.1407 11.3525 16.1209 11.3333C16.1011 11.3135 15.024 11.3724 13.7313 11.4609C12.1445 11.5687 11.273 11.6666 11.0965 11.7644C10.8122 11.9112 10.4988 12.4303 10.4988 12.7734C10.4988 12.979 10.871 13.0868 11.6545 13.0868H12.0658V25.1139L11.4 25.3196C10.8809 25.4763 10.7044 25.5741 10.6165 25.7698C10.4598 26.1031 10.4697 26.4066 10.6264 26.4066C10.6852 26.4066 11.792 26.3378 13.0649 26.2598C15.582 26.113 15.8657 26.0442 16.1302 25.5252C16.2088 25.3685 16.277 25.2019 16.277 25.1529C16.277 25.1139 15.9345 24.9962 15.5226 24.8984C15.1014 24.8005 14.6802 24.7027 14.5923 24.6828C14.4257 24.6339 14.4157 24.3304 14.4157 20.1186V15.6033L17.3931 20.2753C20.5173 25.1721 20.9093 25.7308 21.3893 25.9755C21.987 26.2889 23.5051 26.0733 24.2688 25.5741L24.5042 25.4273L24.524 18.7479L24.5531 12.0586L25.0722 11.9608C25.6891 11.8431 25.9734 11.5594 25.9734 11.0695C25.9734 10.7561 25.9536 10.7362 25.66 10.7462C25.4847 10.7542 24.4757 10.813 23.4277 10.8818Z" class="fill-foreground" fill="currentColor"/>
                              </svg>
                              <span class="block ms-3">
                                <span class="block text-sm font-medium text-foreground group-hover:text-primary-hover group-focus:text-primary-focus">
                                  Notion
                                </span>
                                <span class="block text-xs text-muted-foreground-1">
                                  notion.so
                                </span>
                              </span>
                              <svg class="shrink-0 size-3.5 ms-auto" 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>
                            </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-56 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-dnwpd-footer">
                              <div class="p-1 space-y-0.5">

<label for="hs-pro-dnwpd-footer-project-notion" class="py-2 px-3 group block w-full text-start rounded-lg cursor-pointer hover:bg-dropdown-item-hover group-has-checked:bg-dropdown-item-active focus:outline-hidden focus:bg-dropdown-item-focus">
                                  <input type="radio" class="hidden" id="hs-pro-dnwpd-footer-project-notion" name="hs-pro-dnwpd-footer-project" checked>
                                  <div class="flex gap-x-2">
                                    <div class="self-center">
                                      <svg class="shrink-0 size-5 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                        <path d="M7 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM7 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM7 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-3 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-3 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
                                      </svg>
                                    </div>
                                    <svg class="shrink-0 size-8" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                      <path d="M11.7438 0.940745C6.84695 1.30308 2.6841 1.63631 2.48837 1.67533C1.9396 1.77319 1.44038 2.14544 1.20563 2.63537L1 3.06646L1.01982 13.3407L1.04893 23.615L1.36234 24.2517C1.53886 24.6042 2.73365 26.2499 4.0362 27.9439C6.61221 31.2836 6.79802 31.47 7.77726 31.5679C8.06156 31.597 10.1966 31.4991 12.5081 31.3622C14.8295 31.2154 18.5508 30.99 20.7842 30.863C30.3233 30.2839 29.8334 30.3328 30.3815 29.8627C31.0672 29.2947 31.0183 30.2251 31.0474 17.7377C31.0672 7.15003 31.0573 6.45509 30.9006 6.13177C30.7148 5.76943 30.3815 5.51487 26.0329 2.45885C23.1243 0.421704 22.9186 0.313932 21.6155 0.294111C21.0772 0.274911 16.6307 0.568497 11.7438 0.940745ZM22.752 2.28232C23.1633 2.46814 26.1704 4.56412 26.6108 4.9661C26.7284 5.08378 26.7675 5.18164 26.7086 5.24048C26.5717 5.35817 7.96245 6.465 7.42421 6.38634C7.17956 6.34732 6.81722 6.20052 6.61159 6.06302C5.75932 5.48514 3.64413 3.75149 3.64413 3.62452C3.64413 3.29129 3.57538 3.29129 11.8714 2.69421C13.4582 2.58644 16.0633 2.39071 17.6502 2.26312C21.0871 1.98874 22.1159 1.99865 22.752 2.28232ZM28.6677 7.63996C28.8046 7.77685 28.9223 8.04132 28.9613 8.29589C28.9904 8.53125 29.0102 12.9189 28.9904 18.0313C28.9613 26.8067 28.9514 27.3555 28.7848 27.61C28.6869 27.7667 28.4912 27.9333 28.3438 27.9823C27.9331 28.1489 8.43318 29.2557 8.03183 29.138C7.84601 29.0891 7.59083 28.9324 7.45394 28.7955L7.21858 28.541L7.18947 19.0799C7.16965 12.4395 7.18947 9.5012 7.26813 9.23672C7.32697 9.041 7.47376 8.80564 7.60136 8.72759C7.77788 8.60991 8.93364 8.51205 12.9101 8.2773C15.7016 8.1206 20.0206 7.85613 22.4987 7.70933C28.3933 7.34638 28.3741 7.34638 28.6677 7.63996Z" class="fill-foreground" fill="currentColor"/>
                                      <path d="M23.4277 10.8818C22.3698 10.9506 21.4296 11.0484 21.3218 11.1073C20.9985 11.2739 20.8028 11.5483 20.7638 11.8617C20.7347 12.185 20.8325 12.224 21.8898 12.3516L22.35 12.4104V16.5925C22.35 19.0799 22.311 20.7256 22.2621 20.6767C22.2131 20.6178 20.8226 18.5027 19.167 15.9756C17.512 13.4392 16.1407 11.3525 16.1209 11.3333C16.1011 11.3135 15.024 11.3724 13.7313 11.4609C12.1445 11.5687 11.273 11.6666 11.0965 11.7644C10.8122 11.9112 10.4988 12.4303 10.4988 12.7734C10.4988 12.979 10.871 13.0868 11.6545 13.0868H12.0658V25.1139L11.4 25.3196C10.8809 25.4763 10.7044 25.5741 10.6165 25.7698C10.4598 26.1031 10.4697 26.4066 10.6264 26.4066C10.6852 26.4066 11.792 26.3378 13.0649 26.2598C15.582 26.113 15.8657 26.0442 16.1302 25.5252C16.2088 25.3685 16.277 25.2019 16.277 25.1529C16.277 25.1139 15.9345 24.9962 15.5226 24.8984C15.1014 24.8005 14.6802 24.7027 14.5923 24.6828C14.4257 24.6339 14.4157 24.3304 14.4157 20.1186V15.6033L17.3931 20.2753C20.5173 25.1721 20.9093 25.7308 21.3893 25.9755C21.987 26.2889 23.5051 26.0733 24.2688 25.5741L24.5042 25.4273L24.524 18.7479L24.5531 12.0586L25.0722 11.9608C25.6891 11.8431 25.9734 11.5594 25.9734 11.0695C25.9734 10.7561 25.9536 10.7362 25.66 10.7462C25.4847 10.7542 24.4757 10.813 23.4277 10.8818Z" class="fill-foreground" fill="currentColor"/>
                                    </svg>
                                    <div class="grow">
                                      <p class="text-sm font-medium text-foreground">
                                        Notion
                                      </p>
                                      <p class="text-xs text-muted-foreground-1">
                                        notion.so
                                      </p>
                                    </div>
                                    <div class="ms-auto self-center">
                                      <svg class="shrink-0 size-4 text-foreground opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                    </div>
                                  </div>
                                </label>

<label for="hs-pro-dnwpd-footer-project-github" class="py-2 px-3 group block w-full text-start rounded-lg cursor-pointer hover:bg-dropdown-item-hover group-has-checked:bg-dropdown-item-active focus:outline-hidden focus:bg-dropdown-item-focus">
                                  <input type="radio" class="hidden" id="hs-pro-dnwpd-footer-project-github" name="hs-pro-dnwpd-footer-project">
                                  <div class="flex gap-x-2">
                                    <div class="self-center">
                                      <svg class="shrink-0 size-5 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                        <path d="M7 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM7 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM7 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-3 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-3 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
                                      </svg>
                                    </div>
                                    <svg class="shrink-0 size-8" width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                      <path d="M16.0001 0C7.16461 0 0 7.34466 0 16.405C0 23.6533 4.5845 29.8026 10.9419 31.9718C11.7415 32.1236 12.0351 31.6159 12.0351 31.1826C12.0351 30.7915 12.0202 29.4991 12.0134 28.1283C7.56202 29.1207 6.62276 26.1927 6.62276 26.1927C5.89494 24.2965 4.84626 23.7924 4.84626 23.7924C3.39464 22.7742 4.95568 22.795 4.95568 22.795C6.5624 22.9108 7.40843 24.4856 7.40843 24.4856C8.83545 26.9936 11.1514 26.2685 12.0645 25.8495C12.208 24.789 12.6227 24.0654 13.0803 23.6558C9.5265 23.2408 5.79054 21.8342 5.79054 15.5483C5.79054 13.7573 6.41559 12.2938 7.43917 11.1449C7.27303 10.7317 6.72541 9.0632 7.59415 6.80351C7.59415 6.80351 8.93772 6.36259 11.9953 8.48512C13.2715 8.12152 14.6403 7.93934 16.0001 7.93316C17.3598 7.93934 18.7296 8.12152 20.0083 8.48512C23.0623 6.36259 24.404 6.80351 24.404 6.80351C25.2748 9.0632 24.727 10.7317 24.5608 11.1449C25.5867 12.2938 26.2075 13.7572 26.2075 15.5483C26.2075 21.8491 22.4645 23.2366 18.9017 23.6426C19.4755 24.1518 19.9869 25.1502 19.9869 26.6806C19.9869 28.8756 19.9683 30.6422 19.9683 31.1826C19.9683 31.6192 20.2563 32.1307 21.0674 31.9696C27.4213 29.798 32 23.6509 32 16.405C32 7.34466 24.8364 0 16.0001 0Z" class="fill-foreground" fill="currentColor"/>
                                      <path d="M5.99251 23.3693C5.95737 23.4508 5.83213 23.4752 5.71832 23.4194C5.60224 23.3658 5.53699 23.2547 5.57464 23.1728C5.60915 23.089 5.73438 23.0655 5.8502 23.1219C5.96653 23.1753 6.03279 23.2875 5.99251 23.3693ZM6.77955 24.0893C6.70326 24.1619 6.55405 24.1282 6.45279 24.0135C6.34813 23.8991 6.32856 23.7463 6.40598 23.6726C6.48466 23.6001 6.62935 23.634 6.73425 23.7485C6.83891 23.8641 6.85924 24.0161 6.77943 24.0894M7.31952 25.0105C7.22139 25.0804 7.06102 25.0149 6.96201 24.869C6.864 24.7232 6.864 24.5482 6.96414 24.4781C7.06353 24.408 7.22139 24.471 7.32178 24.6158C7.41965 24.7641 7.41965 24.9391 7.31939 25.0107M8.23255 26.0775C8.14484 26.1766 7.95811 26.1501 7.82133 26.0147C7.68154 25.8825 7.64252 25.6947 7.73048 25.5955C7.8192 25.4962 8.00705 25.5241 8.14484 25.6583C8.28375 25.7903 8.32604 25.9795 8.23255 26.0775ZM9.41262 26.4378C9.3741 26.5662 9.19415 26.6246 9.01295 26.57C8.832 26.5138 8.71354 26.3633 8.75006 26.2335C8.7877 26.1041 8.9684 26.0433 9.15098 26.1017C9.33168 26.1577 9.45027 26.307 9.41262 26.4378ZM10.7558 26.5905C10.7603 26.7258 10.6066 26.838 10.4164 26.8405C10.225 26.8447 10.0703 26.7352 10.0683 26.6022C10.0683 26.4656 10.2185 26.3544 10.4097 26.3512C10.6 26.3473 10.7558 26.456 10.7558 26.5905ZM12.0752 26.5386C12.098 26.6706 11.9658 26.8063 11.7769 26.8423C11.5912 26.877 11.4193 26.7956 11.3955 26.6647C11.3725 26.5294 11.5072 26.3939 11.6926 26.3588C11.8818 26.3251 12.0511 26.4044 12.0752 26.5386Z" class="fill-foreground" fill="currentColor"/>
                                    </svg>
                                    <div class="grow">
                                      <p class="text-sm font-medium text-foreground">
                                        Github
                                      </p>
                                      <p class="text-xs text-muted-foreground-1">
                                        github.com
                                      </p>
                                    </div>
                                    <div class="ms-auto self-center">
                                      <svg class="shrink-0 size-4 text-foreground opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                    </div>
                                  </div>
                                </label>
                                
                              </div>

<div class="p-1 border-t border-dropdown-divider">
                                <button type="button" class="w-full flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm 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-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 12h8"/><path d="M12 8v8"/></svg>
                                  Add another project
                                </button>
                              </div>

<div class="p-1 border-t border-dropdown-divider">
                                <button type="button" class="w-full flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 focus:outline-hidden focus:bg-dropdown-item-focus">
                                  Sign out
                                  <span class="ms-auto text-xs text-muted-foreground-1">
                                    preline@site.com
                                  </span>
                                </button>
                              </div>
                            </div>
                            
                          </div>
                        </div>

</footer>
                    </div>
                  </aside>

<main id="content" class="lg:ps-65 pt-15">
                    <div class="p-2 sm:p-5 sm:py-0 md:pt-5 space-y-5">
                      
                      <div class="p-4 flex flex-col justify-center h-72 md:h-96 min-h-[calc(100vh-115px)] sm:min-h-[calc(100vh-143px)]  bg-layer border border-layer-line shadow-2xs rounded-xl">
                        <div class="relative h-full border border-dashed border-black/10 dark:border-white/10 rounded-xl overflow-hidden">
                          <div class="absolute inset-0 size-full">
                            <div class="bg-[linear-gradient(45deg,rgba(0,0,0,0.1)_7.14%,transparent_7.14%,transparent_50%,rgba(0,0,0,0.1)_50%,rgba(0,0,0,0.1)_57.14%,transparent_57.14%,transparent)] dark:bg-[linear-gradient(45deg,rgba(255,255,255,0.1)_7.14%,transparent_7.14%,transparent_50%,rgba(255,255,255,0.1)_50%,rgba(255,255,255,0.1)_57.14%,transparent_57.14%,transparent)] bg-size-[10px_10px] size-full"></div>
                          </div>
                        </div>
                      </div>
                      
                    </div>
                  </main>

<footer class="lg:ps-65 h-10 sm:h-16 absolute bottom-0 inset-x-0">
                    <div class="p-2 sm:p-5 flex justify-between items-center">
                      <p class="text-xs sm:text-sm text-muted-foreground-1">
                        © 2026 Preline Labs.
                      </p>

<ul>
                        <li class="inline-block relative pe-5 text-xs sm:text-sm text-muted-foreground-1 align-middle last:pe-0 last-of-type:before:hidden before:absolute before:top-1/2 before:inset-e-2 before:-translate-y-1/2 before:w-px before:h-3.5 before:rotate-18 before:bg-surface-3">
                          <a class="hover:text-primary-hover focus:outline-hidden focus:underline" href="#">
                            FAQ
                          </a>
                        </li>
                        <li class="inline-block relative pe-5 text-xs sm:text-sm text-muted-foreground-1 align-middle last:pe-0 last-of-type:before:hidden before:absolute before:top-1/2 before:inset-e-2 before:-translate-y-1/2 before:w-px before:h-3.5 before:rotate-18 before:bg-surface-3">
                          <a class="hover:text-primary-hover focus:outline-hidden focus:underline" href="#">
                            License
                          </a>
                        </li>
                        <li class="inline-block relative pe-5 text-xs sm:text-sm text-muted-foreground-1 align-middle sm:leading-3 last:pe-0 last-of-type:before:hidden before:absolute before:top-1/2 before:inset-e-2 before:-translate-y-1/2 before:w-px before:h-3.5 before:rotate-18 before:bg-surface-3">
                          <button type="button" class="hover:text-primary-hover focus:outline-hidden focus:underline" data-hs-overlay="#hs-pro-dfkm">
                            <svg class="shrink-0 size-3.5 sm: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 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"/></svg>
                          </button>
                        </li>
                      </ul>
                      
                    </div>
                  </footer>

<div id="hs-pro-dnsm" class="hs-overlay hs-overlay-backdrop-open:backdrop-blur-md hidden size-full fixed top-0 inset-s-0 z-80 overflow-x-hidden overflow-y-auto pointer-events-none" role="dialog" tabindex="-1" aria-label="Search">
                    <div class="hs-overlay-open:opacity-100 hs-overlay-open:duration-500 opacity-0 ease-out transition-all sm:max-w-lg sm:w-full m-3 sm:mx-auto h-[calc(100%-56px)] min-h-[calc(100%-56px)] flex items-center">
                      <div class="max-h-full relative w-full flex flex-col bg-overlay border border-overlay-line rounded-xl pointer-events-auto shadow-xl">
                        
                        <div class="relative">
                          <div class="absolute inset-y-0 inset-s-0 flex items-center pointer-events-none z-20 ps-3.5">
                            <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="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
                          </div>
                          <div class="border-b border-overlay-divider">
                            <input type="text" class="py-2.5 sm:py-3 ps-10 pe-8 block w-full bg-layer border-transparent rounded-t-lg sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:outline-hidden focus:ring-0 disabled:opacity-50 disabled:pointer-events-none" placeholder="Search or type a command" autofocus>
                          </div>
                          <div class="hidden absolute inset-y-0 inset-e-0 flex items-center z-20 pe-1">
                            <button type="button" class="inline-flex shrink-0 justify-center items-center size-6 rounded-full text-muted-foreground-1 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" aria-label="Close">
                              <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"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
                            </button>
                          </div>
                        </div>

<div class="h-125 p-4 overflow-y-auto overflow-hidden [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                          
                          <div class="pb-4 mb-4 last:pb-0 last:mb-0 last:border-0 border-b border-overlay-divider">
                            <span class="block mb-2 text-xs text-muted-foreground-1">
                              Topics
                            </span>

<div class="flex flex-wrap  gap-1 sm:gap-2">
                              <a class="inline-flex items-center gap-x-1.5 text-xs text-layer-foreground bg-layer border border-layer-line hover:bg-muted-hover py-1.5 px-2.5 rounded-full focus:outline-hidden focus:bg-muted-focus" href="#">
                                <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"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg>
                                Inbox
                              </a>
                              <a class="inline-flex items-center gap-x-1.5 text-xs text-layer-foreground bg-layer border border-layer-line hover:bg-muted-hover py-1.5 px-2.5 rounded-full focus:outline-hidden focus:bg-muted-focus" href="#">
                                <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="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
                                Activity
                              </a>
                              <a class="inline-flex items-center gap-x-1.5 text-xs text-layer-foreground bg-layer border border-layer-line hover:bg-muted-hover py-1.5 px-2.5 rounded-full focus:outline-hidden focus:bg-muted-focus" href="#">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                  <path d="M14.9636 7.95706C14.9636 7.03203 13.8052 6.1554 12.0292 5.61175C12.439 3.80157 12.2569 2.36137 11.4542 1.90027C11.2692 1.79212 11.0529 1.74089 10.8167 1.74089V2.3756C10.9476 2.3756 11.0529 2.40121 11.1411 2.4496C11.5282 2.67161 11.6961 3.51695 11.5652 4.60419C11.5339 4.87174 11.4827 5.15351 11.4201 5.44099C10.8622 5.30438 10.2531 5.19907 9.61271 5.13076C9.22848 4.60419 8.82999 4.12602 8.42868 3.70764C9.35654 2.84523 10.2275 2.37275 10.8195 2.37275V1.73804C10.0368 1.73804 9.01216 2.2959 7.97612 3.26362C6.9401 2.30159 5.91546 1.74942 5.13274 1.74942V2.38413C5.72192 2.38413 6.59569 2.85376 7.52358 3.71049C7.12509 4.12887 6.72663 4.60419 6.34807 5.13076C5.70484 5.19907 5.09574 5.30438 4.53786 5.44384C4.47241 5.15921 4.42403 4.88314 4.38988 4.61842C4.25609 3.53117 4.42118 2.68584 4.80541 2.46098C4.89079 2.40975 5.0018 2.38698 5.13274 2.38698V1.75227C4.89364 1.75227 4.67732 1.8035 4.48948 1.91166C3.68969 2.37275 3.51038 3.81009 3.92308 5.6146C2.15272 6.16108 1 7.03488 1 7.95706C1 8.88209 2.15842 9.75872 3.93446 10.3024C3.52461 12.1126 3.70677 13.5528 4.50941 14.0138C4.69443 14.122 4.91072 14.1732 5.14982 14.1732C5.93254 14.1732 6.95718 13.6154 7.99319 12.6477C9.02924 13.6097 10.0539 14.1619 10.8366 14.1619C11.0757 14.1619 11.292 14.1106 11.4799 14.0025C12.2796 13.5414 12.4589 12.104 12.0463 10.2995C13.8109 9.7559 14.9636 8.87924 14.9636 7.95706ZM11.2578 6.05862C11.1525 6.42577 11.0216 6.80434 10.8736 7.1829C10.7569 6.9552 10.6345 6.72748 10.5007 6.49978C10.3698 6.27209 10.2303 6.0501 10.0909 5.83378C10.495 5.89356 10.885 5.96753 11.2578 6.05862ZM9.95427 9.08986C9.73225 9.4741 9.50455 9.83843 9.2683 10.1771C8.84422 10.2141 8.41446 10.2341 7.98182 10.2341C7.55203 10.2341 7.12227 10.2141 6.701 10.18C6.46479 9.84128 6.23424 9.4798 6.01222 9.09841C5.7959 8.72556 5.59951 8.347 5.42022 7.96561C5.59668 7.5842 5.7959 7.20282 6.00937 6.82996C6.23139 6.4457 6.45908 6.0814 6.69533 5.74269C7.11942 5.70569 7.54918 5.68576 7.98182 5.68576C8.41161 5.68576 8.84137 5.70569 9.26263 5.73984C9.49885 6.07855 9.7294 6.44003 9.95142 6.82141C10.1677 7.19427 10.3641 7.57283 10.5434 7.95421C10.3641 8.33562 10.1677 8.717 9.95427 9.08986ZM10.8736 8.71986C11.0273 9.10127 11.1582 9.48265 11.2664 9.85266C10.8935 9.94374 10.5007 10.0206 10.0937 10.0803C10.2332 9.86121 10.3727 9.63633 10.5036 9.40579C10.6345 9.17809 10.7569 8.94755 10.8736 8.71986ZM7.98752 11.7568C7.72282 11.4835 7.45812 11.179 7.19625 10.846C7.45242 10.8574 7.71427 10.8659 7.97897 10.8659C8.24652 10.8659 8.51121 10.8602 8.77024 10.846C8.51406 11.179 8.24937 11.4835 7.98752 11.7568ZM5.8699 10.0803C5.46575 10.0206 5.07581 9.94659 4.70295 9.85551C4.80826 9.48835 4.9392 9.10979 5.08719 8.73123C5.2039 8.95895 5.32628 9.18665 5.46004 9.41434C5.59383 9.64204 5.73044 9.86403 5.8699 10.0803ZM7.97329 4.15735C8.23799 4.43058 8.50269 4.73513 8.76454 5.06813C8.50836 5.05676 8.24652 5.0482 7.98182 5.0482C7.71427 5.0482 7.44957 5.05391 7.19057 5.06813C7.44672 4.73513 7.71142 4.43058 7.97329 4.15735ZM5.86705 5.83378C5.72759 6.05295 5.58813 6.27779 5.45719 6.50834C5.32628 6.73603 5.2039 6.96372 5.08719 7.19142C4.9335 6.81004 4.80256 6.42863 4.69443 6.05862C5.06726 5.97039 5.46004 5.89356 5.86705 5.83378ZM3.29122 9.39727C2.28365 8.96748 1.63186 8.40393 1.63186 7.95706C1.63186 7.5102 2.28365 6.9438 3.29122 6.51686C3.536 6.41155 3.80354 6.31764 4.07962 6.22941C4.24186 6.78726 4.45533 7.36788 4.72003 7.96276C4.45818 8.55476 4.24756 9.13257 4.08817 9.68756C3.80639 9.59933 3.53884 9.50257 3.29122 9.39727ZM4.82249 13.4645C4.4354 13.2425 4.26749 12.3972 4.3984 11.3099C4.4297 11.0424 4.48096 10.7606 4.54356 10.4731C5.10144 10.6097 5.71052 10.7151 6.35092 10.7834C6.73516 11.3099 7.13364 11.7881 7.53495 12.2065C6.6071 13.0689 5.73615 13.5414 5.14412 13.5414C5.01603 13.5385 4.90787 13.5129 4.82249 13.4645ZM11.5738 11.2957C11.7075 12.383 11.5425 13.2283 11.1582 13.4531C11.0728 13.5044 10.9618 13.5272 10.8309 13.5272C10.2417 13.5272 9.36794 13.0575 8.44006 12.2008C8.83854 11.7824 9.237 11.3071 9.61556 10.7805C10.2588 10.7122 10.8679 10.6069 11.4258 10.4674C11.4912 10.7549 11.5425 11.031 11.5738 11.2957ZM12.6696 9.39727C12.4248 9.50257 12.1572 9.59651 11.8812 9.68474C11.7189 9.12687 11.5055 8.54624 11.2408 7.95136C11.5026 7.35936 11.7132 6.78156 11.8726 6.22656C12.1544 6.31479 12.4219 6.41155 12.6724 6.51686C13.68 6.94665 14.3318 7.5102 14.3318 7.95706C14.3289 8.40393 13.6771 8.97033 12.6696 9.39727Z"/>
                                  <path d="M7.97885 9.25778C8.69722 9.25778 9.27959 8.67543 9.27959 7.95706C9.27959 7.23869 8.69722 6.65632 7.97885 6.65632C7.26048 6.65632 6.67814 7.23869 6.67814 7.95706C6.67814 8.67543 7.26048 9.25778 7.97885 9.25778Z"/>
                                </svg>
                                React
                              </a>
                              <a class="inline-flex items-center gap-x-1.5 text-xs text-layer-foreground bg-layer border border-layer-line hover:bg-muted-hover py-1.5 px-2.5 rounded-full focus:outline-hidden focus:bg-muted-focus" href="#">
                                <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="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/><line x1="16" x2="8" y1="13" y2="13"/><line x1="16" x2="8" y1="17" y2="17"/><line x1="10" x2="8" y1="9" y2="9"/></svg>
                                Files
                              </a>
                            </div>
                            
                          </div>

<div class="pb-4 mb-4 last:pb-0 last:mb-0 last:border-0 border-b border-line-2">
                            <span class=" block mb-2 text-xs text-muted-foreground-1">
                              Recent
                            </span>

<li>
                                <a class="py-2 px-3 flex items-center gap-x-3 hover:bg-muted-hover rounded-lg focus:outline-hidden focus:bg-muted-focus" href="#">
                                  <svg class="shrink-0 size-5" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M11.7326 0C9.96372 0.00130479 8.53211 1.43397 8.53342 3.19935C8.53211 4.96473 9.96503 6.39739 11.7339 6.39869H14.9345V3.20065C14.9358 1.43527 13.5029 0.00260958 11.7326 0C11.7339 0 11.7339 0 11.7326 0M11.7326 8.53333H3.20053C1.43161 8.53464 -0.00130383 9.9673 3.57297e-06 11.7327C-0.00261123 13.4981 1.4303 14.9307 3.19922 14.9333H11.7326C13.5016 14.932 14.9345 13.4994 14.9332 11.734C14.9345 9.9673 13.5016 8.53464 11.7326 8.53333Z" fill="#36C5F0"/>
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M32 11.7327C32.0013 9.9673 30.5684 8.53464 28.7995 8.53333C27.0306 8.53464 25.5976 9.9673 25.5989 11.7327V14.9333H28.7995C30.5684 14.932 32.0013 13.4994 32 11.7327ZM23.4666 11.7327V3.19935C23.4679 1.43527 22.0363 0.00260958 20.2674 0C18.4984 0.00130479 17.0655 1.43397 17.0668 3.19935V11.7327C17.0642 13.4981 18.4971 14.9307 20.2661 14.9333C22.035 14.932 23.4679 13.4994 23.4666 11.7327Z" fill="#2EB67D"/>
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M20.2661 32C22.035 31.9987 23.4679 30.566 23.4666 28.8007C23.4679 27.0353 22.035 25.6026 20.2661 25.6013H17.0656V28.8007C17.0642 30.5647 18.4972 31.9974 20.2661 32ZM20.2661 23.4654H28.7995C30.5684 23.4641 32.0013 22.0314 32 20.266C32.0026 18.5006 30.5697 17.068 28.8008 17.0654H20.2674C18.4985 17.0667 17.0656 18.4993 17.0669 20.2647C17.0656 22.0314 18.4972 23.4641 20.2661 23.4654Z" fill="#ECB22E"/>
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.93953e-07 20.266C-0.00130651 22.0314 1.43161 23.4641 3.20052 23.4654C4.96944 23.4641 6.40235 22.0314 6.40105 20.266V17.0667H3.20052C1.43161 17.068 -0.00130651 18.5006 8.93953e-07 20.266ZM8.53342 20.266V28.7993C8.5308 30.5647 9.96372 31.9974 11.7326 32C13.5016 31.9987 14.9345 30.566 14.9332 28.8007V20.2686C14.9358 18.5032 13.5029 17.0706 11.7339 17.068C9.96372 17.068 8.53211 18.5006 8.53342 20.266C8.53342 20.2673 8.53342 20.266 8.53342 20.266Z" fill="#E01E5A"/>
                                  </svg>
                                  <span class="text-sm text-foreground">
                                    Start a conversation
                                  </span>
                                  <span class="text-xs text-muted-foreground">
                                    Slack
                                  </span>

<li>
                                <a class="py-2 px-3 flex items-center gap-x-3 hover:bg-muted-hover rounded-lg focus:outline-hidden focus:bg-muted-focus" href="#">
                                  <svg class="shrink-0 size-5" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M11.7438 0.940745C6.84695 1.30308 2.6841 1.63631 2.48837 1.67533C1.9396 1.77319 1.44038 2.14544 1.20563 2.63537L1 3.06646L1.01982 13.3407L1.04893 23.615L1.36234 24.2517C1.53886 24.6042 2.73365 26.2499 4.0362 27.9439C6.61221 31.2836 6.79802 31.47 7.77726 31.5679C8.06156 31.597 10.1966 31.4991 12.5081 31.3622C14.8295 31.2154 18.5508 30.99 20.7842 30.863C30.3233 30.2839 29.8334 30.3328 30.3815 29.8627C31.0672 29.2947 31.0183 30.2251 31.0474 17.7377C31.0672 7.15003 31.0573 6.45509 30.9006 6.13177C30.7148 5.76943 30.3815 5.51487 26.0329 2.45885C23.1243 0.421704 22.9186 0.313932 21.6155 0.294111C21.0772 0.274911 16.6307 0.568497 11.7438 0.940745ZM22.752 2.28232C23.1633 2.46814 26.1704 4.56412 26.6108 4.9661C26.7284 5.08378 26.7675 5.18164 26.7086 5.24048C26.5717 5.35817 7.96245 6.465 7.42421 6.38634C7.17956 6.34732 6.81722 6.20052 6.61159 6.06302C5.75932 5.48514 3.64413 3.75149 3.64413 3.62452C3.64413 3.29129 3.57538 3.29129 11.8714 2.69421C13.4582 2.58644 16.0633 2.39071 17.6502 2.26312C21.0871 1.98874 22.1159 1.99865 22.752 2.28232ZM28.6677 7.63996C28.8046 7.77685 28.9223 8.04132 28.9613 8.29589C28.9904 8.53125 29.0102 12.9189 28.9904 18.0313C28.9613 26.8067 28.9514 27.3555 28.7848 27.61C28.6869 27.7667 28.4912 27.9333 28.3438 27.9823C27.9331 28.1489 8.43318 29.2557 8.03183 29.138C7.84601 29.0891 7.59083 28.9324 7.45394 28.7955L7.21858 28.541L7.18947 19.0799C7.16965 12.4395 7.18947 9.5012 7.26813 9.23673C7.32697 9.041 7.47376 8.80564 7.60136 8.72759C7.77788 8.60991 8.93364 8.51205 12.9101 8.2773C15.7016 8.1206 20.0206 7.85613 22.4987 7.70933C28.3933 7.34638 28.3741 7.34638 28.6677 7.63996Z" class="fill-foreground" fill="currentColor"/>
                                    <path d="M23.4277 10.8818C22.3698 10.9506 21.4296 11.0484 21.3218 11.1073C20.9985 11.2739 20.8028 11.5483 20.7638 11.8617C20.7347 12.185 20.8325 12.224 21.8898 12.3516L22.35 12.4104V16.5925C22.35 19.0799 22.311 20.7256 22.2621 20.6767C22.2131 20.6178 20.8226 18.5027 19.167 15.9756C17.512 13.4392 16.1407 11.3525 16.1209 11.3333C16.1011 11.3135 15.024 11.3724 13.7313 11.4609C12.1445 11.5687 11.273 11.6666 11.0965 11.7644C10.8122 11.9112 10.4988 12.4303 10.4988 12.7734C10.4988 12.979 10.871 13.0868 11.6545 13.0868H12.0658V25.1139L11.4 25.3196C10.8809 25.4763 10.7044 25.5741 10.6165 25.7698C10.4598 26.1031 10.4697 26.4066 10.6264 26.4066C10.6852 26.4066 11.792 26.3378 13.0649 26.2598C15.582 26.113 15.8657 26.0442 16.1302 25.5252C16.2088 25.3685 16.277 25.2019 16.277 25.1529C16.277 25.1139 15.9345 24.9962 15.5226 24.8984C15.1014 24.8005 14.6802 24.7027 14.5923 24.6828C14.4257 24.6339 14.4157 24.3304 14.4157 20.1186V15.6033L17.3931 20.2753C20.5173 25.1721 20.9093 25.7308 21.3893 25.9755C21.987 26.2889 23.5051 26.0733 24.2688 25.5741L24.5042 25.4273L24.524 18.7479L24.5531 12.0586L25.0722 11.9608C25.6891 11.8431 25.9734 11.5594 25.9734 11.0695C25.9734 10.7561 25.9536 10.7362 25.66 10.7462C25.4847 10.7542 24.4757 10.813 23.4277 10.8818Z" class="fill-foreground" fill="currentColor"/>
                                  </svg>
                                  <span class="text-sm text-foreground">
                                    Create a project
                                  </span>
                                  <span class="text-xs text-muted-foreground">
                                    Notion
                                  </span>

<div class="pb-4 mb-4 last:pb-0 last:mb-0 last:border-0 border-b border-line-2">
                            <span class=" block mb-2 text-xs text-muted-foreground-1">
                              Users
                            </span>

<ul class="-mx-2.5">
                              
                              <li>
                                <a class="py-2 px-3 flex items-center gap-x-3 hover:bg-muted-hover rounded-lg focus:outline-hidden focus:bg-muted-focus" href="#">
                                  <img class="shrink-0 size-5 rounded-full" src="https://images.unsplash.com/photo-1548142813-c348350df52b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">
                                  <span class="text-sm text-foreground">
                                    Kim Ya Sung
                                  </span>
                                  <span class="text-xs text-teal-600">
                                    Active now
                                  </span>
                                </a>
                              </li>

<li>
                                <a class="py-2 px-3 flex items-center gap-x-3 hover:bg-muted-hover rounded-lg focus:outline-hidden focus:bg-muted-focus" href="#">
                                  <img class="shrink-0 size-5 rounded-full" src="https://images.unsplash.com/photo-1610186593977-82a3e3696e7f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">
                                  <span class="text-sm text-foreground">
                                    Chris Peti
                                  </span>
                                  <span class="text-xs text-muted-foreground">
                                    Last seen 2 min ago
                                  </span>
                                </a>
                              </li>
                              
                            </ul>
                            
                          </div>

<div class="pb-4 mb-4 last:pb-0 last:mb-0 last:border-0 border-b border-overlay-divider">
                            <span class=" block mb-2 text-xs text-muted-foreground-1">
                              Events Tomorrow
                            </span>

<ul class="-mx-2.5">
                              
                              <li>
                                <a class="py-2 px-3 flex gap-x-3 hover:bg-muted-hover rounded-md focus:outline-hidden focus:bg-muted-focus" href="#">
                                  <div class="mt-0.5">
                                    <div class="flex justify-center items-center w-5">
                                      <div class="w-1 h-4 bg-teal-500 rounded-full"></div>
                                    </div>
                                  </div>
        
                                  <div class="grow">
                                    <div class="flex justify-between items-center gap-x-1">
                                      <div class="grow">
                                        <p class="text-sm text-foreground">
                                          UI/UX Design Masterclass
                                        </p>
                                        <p class="text-xs text-muted-foreground-1">
                                          12:00 - 13:15
                                        </p>
                                      </div>
            
                                      <div class="min-w-24">
                                        <div class="flex justify-end items-center gap-x-3">
                                          <div class="flex items-center gap-x-1">
                                            
                                            <div class="flex items-center -space-x-1">
                                              
                                              <div class="flex bg-secondary size-4 rounded-md ring-2 ring-overlay">
                                                <img class="shrink-0 size-full rounded-md" 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="Avatar">
                                              </div>

<div class="flex bg-secondary size-4 rounded-md ring-2 ring-overlay">
                                                <img class="shrink-0 size-full rounded-md" src="https://images.unsplash.com/photo-1601935111741-ae98b2b230b0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">
                                              </div>

<div class="flex bg-secondary size-4 rounded-md ring-2 ring-overlay">
                                                <img class="shrink-0 size-full rounded-md" 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>

<div class="flex bg-secondary size-4 rounded-md ring-2 ring-overlay">
                                                <span class="flex shrink-0 justify-center items-center size-4 bg-violet-200 text-violet-800 text-xs uppercase rounded-md dark:bg-violet-800 dark:text-primary-200">L</span>
                                              </div>
                                              
                                            </div>

<li>
                                <a class="py-2 px-3 flex gap-x-3 hover:bg-muted-hover rounded-md focus:outline-hidden focus:bg-muted-focus" href="#">
                                  <div class="mt-0.5">
                                    <div class="flex justify-center items-center w-5">
                                      <div class="w-1 h-4 bg-purple-500 rounded-full"></div>
                                    </div>
                                  </div>
        
                                  <div class="grow">
                                    <div class="flex justify-between items-center gap-x-1">
                                      <div class="grow">
                                        <p class="text-sm text-foreground">
                                          Tailwind CSS Deep Dive
                                        </p>
                                        <p class="text-xs text-muted-foreground-1">
                                          14:00 - 14:30
                                        </p>
                                      </div>
                                    </div>
                                  </div>
                                </a>
                              </li>
                              
                            </ul>
                            
                          </div>

<div class="pb-4 mb-4 last:pb-0 last:mb-0 last:border-0 border-b border-line-2">
                            <span class=" block mb-2 text-xs text-muted-foreground-1">
                              Files
                            </span>

<ul class="-mx-2.5">
                              
                              <li>
                                <a class="py-2 px-3 flex items-center gap-x-3 hover:bg-muted-hover rounded-lg focus:outline-hidden focus:bg-muted-focus" href="#">
                                  <svg class="shrink-0 size-5" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M20.0324 1.91994H9.45071C9.09999 1.91994 8.76367 2.05926 8.51567 2.30725C8.26767 2.55523 8.12839 2.89158 8.12839 3.24228V8.86395L20.0324 15.8079L25.9844 18.3197L31.9364 15.8079V8.86395L20.0324 1.91994Z" fill="#21A366"/>
                                    <path d="M8.12839 8.86395H20.0324V15.8079H8.12839V8.86395Z" fill="#107C41"/>
                                    <path d="M30.614 1.91994H20.0324V8.86395H31.9364V3.24228C31.9364 2.89158 31.7971 2.55523 31.5491 2.30725C31.3011 2.05926 30.9647 1.91994 30.614 1.91994Z" fill="#33C481"/>
                                    <path d="M20.0324 15.8079H8.12839V28.3736C8.12839 28.7243 8.26767 29.0607 8.51567 29.3087C8.76367 29.5567 9.09999 29.6959 9.45071 29.6959H30.6141C30.9647 29.6959 31.3011 29.5567 31.549 29.3087C31.797 29.0607 31.9364 28.7243 31.9364 28.3736V22.7519L20.0324 15.8079Z" fill="#185C37"/>
                                    <path d="M20.0324 15.8079H31.9364V22.7519H20.0324V15.8079Z" fill="#107C41"/>
                                    <path opacity="0.1" d="M16.7261 6.87994H8.12839V25.7279H16.7261C17.0764 25.7269 17.4121 25.5872 17.6599 25.3395C17.9077 25.0917 18.0473 24.756 18.0484 24.4056V8.20226C18.0473 7.8519 17.9077 7.51616 17.6599 7.2684C17.4121 7.02064 17.0764 6.88099 16.7261 6.87994Z" fill="black"/>
                                    <path opacity="0.2" d="M15.7341 7.87194H8.12839V26.7199H15.7341C16.0844 26.7189 16.4201 26.5792 16.6679 26.3315C16.9157 26.0837 17.0553 25.748 17.0564 25.3976V9.19426C17.0553 8.84386 16.9157 8.50818 16.6679 8.26042C16.4201 8.01266 16.0844 7.87299 15.7341 7.87194Z" fill="black"/>
                                    <path opacity="0.2" d="M15.7341 7.87194H8.12839V24.7359H15.7341C16.0844 24.7349 16.4201 24.5952 16.6679 24.3475C16.9157 24.0997 17.0553 23.764 17.0564 23.4136V9.19426C17.0553 8.84386 16.9157 8.50818 16.6679 8.26042C16.4201 8.01266 16.0844 7.87299 15.7341 7.87194Z" fill="black"/>
                                    <path opacity="0.2" d="M14.7421 7.87194H8.12839V24.7359H14.7421C15.0924 24.7349 15.4281 24.5952 15.6759 24.3475C15.9237 24.0997 16.0633 23.764 16.0644 23.4136V9.19426C16.0633 8.84386 15.9237 8.50818 15.6759 8.26042C15.4281 8.01266 15.0924 7.87299 14.7421 7.87194Z" fill="black"/>
                                    <path d="M1.51472 7.87194H14.7421C15.0927 7.87194 15.4291 8.01122 15.6771 8.25922C15.925 8.50722 16.0644 8.84354 16.0644 9.19426V22.4216C16.0644 22.7723 15.925 23.1087 15.6771 23.3567C15.4291 23.6047 15.0927 23.7439 14.7421 23.7439H1.51472C1.16402 23.7439 0.827672 23.6047 0.579686 23.3567C0.3317 23.1087 0.192383 22.7723 0.192383 22.4216V9.19426C0.192383 8.84354 0.3317 8.50722 0.579686 8.25922C0.827672 8.01122 1.16402 7.87194 1.51472 7.87194Z" fill="#107C41"/>
                                    <path d="M3.69711 20.7679L6.90722 15.794L3.96694 10.8479H6.33286L7.93791 14.0095C8.08536 14.3091 8.18688 14.5326 8.24248 14.68H8.26328C8.36912 14.4407 8.47984 14.2079 8.5956 13.9817L10.3108 10.8479H12.4822L9.46656 15.7663L12.5586 20.7679H10.2473L8.3932 17.2959C8.30592 17.148 8.23184 16.9927 8.172 16.8317H8.14424C8.09016 16.9891 8.01824 17.1399 7.92998 17.2811L6.02236 20.7679H3.69711Z" fill="white"/>
                                  </svg>
                                  <span class="text-sm text-foreground">
                                    weekly-reports.xls
                                  </span>
                                  <span class="text-xs text-muted-foreground">
                                    04 Dec 2022
                                  </span>
                                </a>
                              </li>

<li>
                                <a class="py-2 px-3 flex items-center gap-x-3 hover:bg-muted-hover rounded-lg focus:outline-hidden focus:bg-muted-focus" href="#">
                                  <svg class="shrink-0 size-5" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M30.6141 1.91994H9.45071C9.09999 1.91994 8.76367 2.05926 8.51567 2.30725C8.26767 2.55523 8.12839 2.89158 8.12839 3.24228V8.86395L20.0324 12.3359L31.9364 8.86395V3.24228C31.9364 2.89158 31.797 2.55523 31.549 2.30725C31.3011 2.05926 30.9647 1.91994 30.6141 1.91994Z" fill="#41A5EE"/>
                                    <path d="M31.9364 8.86395H8.12839V15.8079L20.0324 19.2799L31.9364 15.8079V8.86395Z" fill="#2B7CD3"/>
                                    <path d="M31.9364 15.8079H8.12839V22.7519L20.0324 26.2239L31.9364 22.7519V15.8079Z" fill="#185ABD"/>
                                    <path d="M31.9364 22.752H8.12839V28.3736C8.12839 28.7244 8.26767 29.0607 8.51567 29.3087C8.76367 29.5567 9.09999 29.696 9.45071 29.696H30.6141C30.9647 29.696 31.3011 29.5567 31.549 29.3087C31.797 29.0607 31.9364 28.7244 31.9364 28.3736V22.752Z" fill="#103F91"/>
                                    <path opacity="0.1" d="M16.7261 6.87994H8.12839V25.7279H16.7261C17.0764 25.7269 17.4121 25.5872 17.6599 25.3395C17.9077 25.0917 18.0473 24.756 18.0484 24.4056V8.20226C18.0473 7.8519 17.9077 7.51616 17.6599 7.2684C17.4121 7.02064 17.0764 6.88099 16.7261 6.87994Z" fill="black"/>
                                    <path opacity="0.2" d="M15.7341 7.87194H8.12839V26.7199H15.7341C16.0844 26.7189 16.4201 26.5792 16.6679 26.3315C16.9157 26.0837 17.0553 25.748 17.0564 25.3976V9.19426C17.0553 8.84386 16.9157 8.50818 16.6679 8.26042C16.4201 8.01266 16.0844 7.87299 15.7341 7.87194Z" fill="black"/>
                                    <path opacity="0.2" d="M15.7341 7.87194H8.12839V24.7359H15.7341C16.0844 24.7349 16.4201 24.5952 16.6679 24.3475C16.9157 24.0997 17.0553 23.764 17.0564 23.4136V9.19426C17.0553 8.84386 16.9157 8.50818 16.6679 8.26042C16.4201 8.01266 16.0844 7.87299 15.7341 7.87194Z" fill="black"/>
                                    <path opacity="0.2" d="M14.7421 7.87194H8.12839V24.7359H14.7421C15.0924 24.7349 15.4281 24.5952 15.6759 24.3475C15.9237 24.0997 16.0633 23.764 16.0644 23.4136V9.19426C16.0633 8.84386 15.9237 8.50818 15.6759 8.26042C15.4281 8.01266 15.0924 7.87299 14.7421 7.87194Z" fill="black"/>
                                    <path d="M1.51472 7.87194H14.7421C15.0927 7.87194 15.4291 8.01122 15.6771 8.25922C15.925 8.50722 16.0644 8.84354 16.0644 9.19426V22.4216C16.0644 22.7723 15.925 23.1087 15.6771 23.3567C15.4291 23.6047 15.0927 23.7439 14.7421 23.7439H1.51472C1.16401 23.7439 0.827669 23.6047 0.579687 23.3567C0.3317 23.1087 0.192383 22.7723 0.192383 22.4216V9.19426C0.192383 8.84354 0.3317 8.50722 0.579687 8.25922C0.827669 8.01122 1.16401 7.87194 1.51472 7.87194Z" fill="#185ABD"/>
                                    <path d="M12.0468 20.7679H10.2612L8.17801 13.9231L5.99558 20.7679H4.20998L2.22598 10.8479H4.01158L5.40038 17.7919L7.48358 11.0463H8.97161L10.9556 17.7919L12.3444 10.8479H14.0308L12.0468 20.7679Z" fill="white"/>
                                  </svg>
                                  <span class="text-sm text-foreground">
                                    my-file.docx
                                  </span>
                                  <span class="text-xs text-muted-foreground">
                                    30 Dec 2022
                                  </span>
                                </a>
                              </li>
                              
                            </ul>
                            
                          </div> 
                        </div>

<div class="py-3 px-4 flex flex-wrap justify-between items-center gap-2 border-t border-overlay-divider">
                          <div class="inline-flex items-center gap-x-2">
                            <div class="size-5 flex flex-col justify-center items-center bg-layer border border-layer-line text-xs uppercase text-muted-foreground shadow-2xs rounded-sm">
                              <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 10 4 15 9 20"/><path d="M20 4v7a4 4 0 0 1-4 4H4"/></svg>
                            </div>
                            <span class="text-xs text-muted-foreground">
                              to close
                            </span>
                          </div>

<div class="inline-flex items-center gap-x-4">
                            <div class="inline-flex items-center gap-x-2">
                              <div class="size-5 flex flex-col justify-center items-center bg-layer border border-layer-line text-xs uppercase text-muted-foreground shadow-2xs rounded-sm">
                                <svg class="shrink-0 size-3.5 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M22 14.596C21.828 15.1189 20.888 16 19.5969 16C18.3057 16 16.9265 14.6624 16.9265 12.8974V12.0687C16.9265 10.2373 18.2022 9.00142 19.5969 9.00142C20.9918 9.00142 21.7942 9.69876 22 10.5666M14.5417 10.3109C14.3233 9.6198 13.3292 8.96537 12.1831 9.00142C11.0374 9.03732 10.0119 9.83333 10.0119 10.777C10.0119 11.7208 10.6901 12.0632 12.1839 12.2081C13.6774 12.353 14.49 13.1331 14.5417 13.9596C14.5934 14.7861 13.8083 16 12.1839 16C10.7604 16 9.69525 14.6894 9.63548 13.9379M7.25295 14.7213C6.82726 15.5884 5.94455 15.9999 4.75814 15.9999C3.57172 15.9999 2 15.088 2 12.7831V12.1113C2 10.5911 3.16477 9.00113 4.75814 9.00113C6.35166 9.00113 7.41158 10.5059 7.25295 12.2838H2.47754"/></svg>
                              </div>
                              <span class="text-xs text-muted-foreground">
                                to select
                              </span>
                            </div>
    
                            <div class="inline-flex items-center gap-x-2">
                              <div class="size-5 flex flex-col justify-center items-center bg-layer border border-layer-line text-xs uppercase text-muted-foreground shadow-2xs rounded-sm">
                                <svg class="shrink-0 size-3" 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="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>
                              </div>
                              <div class="size-5 flex flex-col justify-center items-center bg-layer border border-layer-line text-xs uppercase text-muted-foreground shadow-2xs rounded-sm">
                                <svg class="shrink-0 size-3" 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="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
                              </div>
                              <span class="text-xs text-muted-foreground">
                                to navigate
                              </span>
                            </div>
                          </div>
                        </div>
                        
                      </div>
                    </div>
                  </div>

<div id="hs-pro-dnam" class="hs-overlay hs-overlay-open:translate-x-0
                  translate-x-full transition-all duration-300 transform
                  size-full sm:w-100
                  hidden
                  fixed top-0 inset-e-0 z-80
                  flex flex-col
                  bg-overlay border border-overlay-line" role="dialog" tabindex="-1" aria-labelledby="hs-pro-dnam-label">
                    
                    <div class="py-2.5 px-4 flex justify-between items-center border-b border-overlay-divider">
                      <h2 id="hs-pro-dnam-label" class="font-medium text-foreground">
                        Activity
                      </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-dnam">
                        <span class="sr-only">Close</span>
                        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                      </button>
                    </div>

<div class="px-5 py-7 h-full overflow-y-auto overflow-hidden [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                      
                      <div>
                        
                        <div class="relative last:pb-0 pb-8 last:after:hidden after:absolute after:top-9.5 after:bottom-0 after:inset-s-[19px] after:border-s after:border-line-2">
                          <div class="w-full flex gap-x-5">
                            <img class="shrink-0 size-9.5 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="Avatar">

<div class="grow">
                              <p class="text-sm font-semibold text-foreground">
                                James Collins
                              </p>
        
                              <p class="text-sm text-muted-foreground-1">
                                Added 2 files to task
                                <a class="ms-1 align-middle inline-flex items-center gap-x-1 text-sm text-primary decoration-2 hover:underline focus:outline-hidden focus:underline font-medium" href="#">
                                  <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="m6 14 1.45-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.55 6a2 2 0 0 1-1.94 1.5H4a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H18a2 2 0 0 1 2 2v2"/></svg>
                                  PR-3
                                </a>
                              </p>
        
                              <div class="mt-2">
                                
                                <div class="grid grid-cols-2 gap-2">
                                  
                                  <div class="inline-block bg-card border border-card-line rounded-lg p-2">
                                    <div class="flex gap-x-2">
                                      <svg class="shrink-0 size-6" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.7438 0.940745C6.84695 1.30308 2.6841 1.63631 2.48837 1.67533C1.9396 1.77319 1.44038 2.14544 1.20563 2.63537L1 3.06646L1.01982 13.3407L1.04893 23.615L1.36234 24.2517C1.53886 24.6042 2.73365 26.2499 4.0362 27.9439C6.61221 31.2836 6.79802 31.47 7.77726 31.5679C8.06156 31.597 10.1966 31.4991 12.5081 31.3622C14.8295 31.2154 18.5508 30.99 20.7842 30.863C30.3233 30.2839 29.8334 30.3328 30.3815 29.8627C31.0672 29.2947 31.0183 30.2251 31.0474 17.7377C31.0672 7.15003 31.0573 6.45509 30.9006 6.13177C30.7148 5.76943 30.3815 5.51487 26.0329 2.45885C23.1243 0.421704 22.9186 0.313932 21.6155 0.294111C21.0772 0.274911 16.6307 0.568497 11.7438 0.940745ZM22.752 2.28232C23.1633 2.46814 26.1704 4.56412 26.6108 4.9661C26.7284 5.08378 26.7675 5.18164 26.7086 5.24048C26.5717 5.35817 7.96245 6.465 7.42421 6.38634C7.17956 6.34732 6.81722 6.20052 6.61159 6.06302C5.75932 5.48514 3.64413 3.75149 3.64413 3.62452C3.64413 3.29129 3.57538 3.29129 11.8714 2.69421C13.4582 2.58644 16.0633 2.39071 17.6502 2.26312C21.0871 1.98874 22.1159 1.99865 22.752 2.28232ZM28.6677 7.63996C28.8046 7.77685 28.9223 8.04132 28.9613 8.29589C28.9904 8.53125 29.0102 12.9189 28.9904 18.0313C28.9613 26.8067 28.9514 27.3555 28.7848 27.61C28.6869 27.7667 28.4912 27.9333 28.3438 27.9823C27.9331 28.1489 8.43318 29.2557 8.03183 29.138C7.84601 29.0891 7.59083 28.9324 7.45394 28.7955L7.21858 28.541L7.18947 19.0799C7.16965 12.4395 7.18947 9.5012 7.26813 9.23672C7.32697 9.041 7.47376 8.80564 7.60136 8.72759C7.77788 8.60991 8.93364 8.51205 12.9101 8.2773C15.7016 8.1206 20.0206 7.85613 22.4987 7.70933C28.3933 7.34638 28.3741 7.34638 28.6677 7.63996Z" class="fill-foreground" fill="currentColor"/><path d="M23.4277 10.8818C22.3698 10.9506 21.4296 11.0484 21.3218 11.1073C20.9985 11.2739 20.8028 11.5483 20.7638 11.8617C20.7347 12.185 20.8325 12.224 21.8898 12.3516L22.35 12.4104V16.5925C22.35 19.0799 22.311 20.7256 22.2621 20.6767C22.2131 20.6178 20.8226 18.5027 19.167 15.9756C17.512 13.4392 16.1407 11.3525 16.1209 11.3333C16.1011 11.3135 15.024 11.3724 13.7313 11.4609C12.1445 11.5687 11.273 11.6666 11.0965 11.7644C10.8122 11.9112 10.4988 12.4303 10.4988 12.7734C10.4988 12.979 10.871 13.0868 11.6545 13.0868H12.0658V25.1139L11.4 25.3196C10.8809 25.4763 10.7044 25.5741 10.6165 25.7698C10.4598 26.1031 10.4697 26.4066 10.6264 26.4066C10.6852 26.4066 11.792 26.3378 13.0649 26.2598C15.582 26.113 15.8657 26.0442 16.1302 25.5252C16.2088 25.3685 16.277 25.2019 16.277 25.1529C16.277 25.1139 15.9345 24.9962 15.5226 24.8984C15.1014 24.8005 14.6802 24.7027 14.5923 24.6828C14.4257 24.6339 14.4157 24.3304 14.4157 20.1186V15.6033L17.3931 20.2753C20.5173 25.1721 20.9093 25.7308 21.3893 25.9755C21.987 26.2889 23.5051 26.0733 24.2688 25.5741L24.5042 25.4273L24.524 18.7479L24.5531 12.0586L25.0722 11.9608C25.6891 11.8431 25.9734 11.5594 25.9734 11.0695C25.9734 10.7561 25.9536 10.7362 25.66 10.7462C25.4847 10.7542 24.4757 10.813 23.4277 10.8818Z" class="fill-foreground" fill="currentColor"/></svg>
                                      <div class="grow truncate">
                                        <p class="block truncate text-xs text-foreground">
                                          list-of-users
                                        </p>
                                        <small class="block text-xs text-muted-foreground">
                                          35kb
                                        </small>
                                      </div>
                                    </div>
                                  </div>

<div class="inline-block bg-card border border-card-line rounded-lg p-2">
                                    <div class="flex gap-x-2">
                                      <svg class="shrink-0 size-6" width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.0001 0C7.16461 0 0 7.34466 0 16.405C0 23.6533 4.5845 29.8026 10.9419 31.9718C11.7415 32.1236 12.0351 31.6159 12.0351 31.1826C12.0351 30.7915 12.0202 29.4991 12.0134 28.1283C7.56202 29.1207 6.62276 26.1927 6.62276 26.1927C5.89494 24.2965 4.84626 23.7924 4.84626 23.7924C3.39464 22.7742 4.95568 22.795 4.95568 22.795C6.5624 22.9108 7.40843 24.4856 7.40843 24.4856C8.83545 26.9936 11.1514 26.2685 12.0645 25.8495C12.208 24.789 12.6227 24.0654 13.0803 23.6558C9.5265 23.2408 5.79054 21.8342 5.79054 15.5483C5.79054 13.7573 6.41559 12.2938 7.43917 11.1449C7.27303 10.7317 6.72541 9.0632 7.59415 6.80351C7.59415 6.80351 8.93772 6.36259 11.9953 8.48512C13.2715 8.12152 14.6403 7.93934 16.0001 7.93316C17.3598 7.93934 18.7296 8.12152 20.0083 8.48512C23.0623 6.36259 24.404 6.80351 24.404 6.80351C25.2748 9.0632 24.727 10.7317 24.5608 11.1449C25.5867 12.2938 26.2075 13.7572 26.2075 15.5483C26.2075 21.8491 22.4645 23.2366 18.9017 23.6426C19.4755 24.1518 19.9869 25.1502 19.9869 26.6806C19.9869 28.8756 19.9683 30.6422 19.9683 31.1826C19.9683 31.6192 20.2563 32.1307 21.0674 31.9696C27.4213 29.798 32 23.6509 32 16.405C32 7.34466 24.8364 0 16.0001 0Z" class="fill-foreground" fill="currentColor"/><path d="M5.99251 23.3693C5.95737 23.4508 5.83213 23.4752 5.71832 23.4194C5.60224 23.3658 5.53699 23.2547 5.57464 23.1728C5.60915 23.089 5.73438 23.0655 5.8502 23.1219C5.96653 23.1753 6.03279 23.2875 5.99251 23.3693ZM6.77955 24.0893C6.70326 24.1619 6.55405 24.1282 6.45279 24.0135C6.34813 23.8991 6.32856 23.7463 6.40598 23.6726C6.48466 23.6001 6.62935 23.634 6.73425 23.7485C6.83891 23.8641 6.85924 24.0161 6.77943 24.0894M7.31952 25.0105C7.22139 25.0804 7.06102 25.0149 6.96201 24.869C6.864 24.7232 6.864 24.5482 6.96414 24.4781C7.06353 24.408 7.22139 24.471 7.32178 24.6158C7.41965 24.7641 7.41965 24.9391 7.31939 25.0107M8.23255 26.0775C8.14484 26.1766 7.95811 26.1501 7.82133 26.0147C7.68154 25.8825 7.64252 25.6947 7.73048 25.5955C7.8192 25.4962 8.00705 25.5241 8.14484 25.6583C8.28375 25.7903 8.32604 25.9795 8.23255 26.0775ZM9.41262 26.4378C9.3741 26.5662 9.19415 26.6246 9.01295 26.57C8.832 26.5138 8.71354 26.3633 8.75006 26.2335C8.7877 26.1041 8.9684 26.0433 9.15098 26.1017C9.33168 26.1577 9.45027 26.307 9.41262 26.4378ZM10.7558 26.5905C10.7603 26.7258 10.6066 26.838 10.4164 26.8405C10.225 26.8447 10.0703 26.7352 10.0683 26.6022C10.0683 26.4656 10.2185 26.3544 10.4097 26.3512C10.6 26.3473 10.7558 26.456 10.7558 26.5905ZM12.0752 26.5386C12.098 26.6706 11.9658 26.8063 11.7769 26.8423C11.5912 26.877 11.4193 26.7956 11.3955 26.6647C11.3725 26.5294 11.5072 26.3939 11.6926 26.3588C11.8818 26.3251 12.0511 26.4044 12.0752 26.5386Z" class="fill-foreground" fill="currentColor"/></svg>
                                      <div class="grow truncate">
                                        <p class="block truncate text-xs text-foreground">
                                          list-of-users
                                        </p>
                                        <small class="block text-xs text-muted-foreground">
                                          30kb
                                        </small>
                                      </div>
                                    </div>
                                  </div>
                                  
                                </div>
                                
                              </div>

<div class="relative last:pb-0 pb-8 last:after:hidden after:absolute after:top-9.5 after:bottom-0 after:inset-s-[19px] after:border-s after:border-line-2">
                          <div class="w-full flex gap-x-5">
                            <span class="flex shrink-0 justify-center items-center size-9.5 bg-layer border border-layer-line text-sm font-semibold uppercase text-layer-foreground rounded-full">
                              B
                            </span>

<div class="grow">
                              <p class="text-sm font-semibold text-foreground">
                                Bob Dean
                              </p>
        
                              <p class="text-sm text-muted-foreground-1">
                                Marked
                                <a class="align-middle inline-flex items-center gap-x-1 text-primary decoration-2 hover:underline font-medium focus:outline-hidden focus:underline" href="#">
                                  <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="m6 14 1.45-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.55 6a2 2 0 0 1-1.94 1.5H4a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H18a2 2 0 0 1 2 2v2"/></svg>
                                  PR-6
                                </a>
                                as
                                <span class="ms-0.5 inline-block align-middle py-1 px-1.5 bg-layer border border-layer-line text-xs font-medium text-layer-foreground rounded-md">
                                  Completed
                                </span>
                              </p>

<p class="mt-2 text-[11px] uppercase text-muted-foreground">
                                Today
                              </p>
                            </div>
                          </div>
                        </div>

<div class="relative last:pb-0 pb-8 last:after:hidden after:absolute after:top-9.5 after:bottom-0 after:inset-s-[19px] after:border-s after:border-line-2">
                          <div class="w-full flex gap-x-5">
                            <img class="shrink-0 size-9.5 rounded-full" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">

<div class="grow">
                              <p class="text-sm font-semibold text-foreground">
                                Crane
                              </p>
        
                              <p class="text-sm text-muted-foreground-1">
                                Added 5 card to
                                <a class="ms-1 align-middle inline-flex items-center gap-x-1 text-sm text-primary decoration-2 hover:underline focus:outline-hidden focus:underline font-medium" href="#">
                                  Payments
                                </a>
                              </p>
        
                              
                              <div class="mt-2 flex gap-x-2">
                                <div class="grow grid grid-cols-3 gap-x-2">
                                  <img class="w-full h-12 object-cover rounded-md" src="https://images.unsplash.com/photo-1635776062360-af423602aff3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=180&q=80" alt="Media Image">
                                  <img class="w-full h-12 object-cover rounded-md" src="https://images.unsplash.com/photo-1635776063328-153b13e3c245?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=180&q=80" alt="Media Image">
                                  <img class="w-full h-12 object-cover rounded-md" src="https://images.unsplash.com/photo-1635776064096-4e12cce9ead4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=180&q=80" alt="Media Image">
                                </div>

<div>
                                  <a class="h-full inline-flex flex-col justify-center items-center bg-layer border border-layer-line text-xs font-medium text-layer-foreground rounded-lg p-1.5 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="#">
                                    +2
                                  </a>
                                </div>
                                
                              </div>
                              
                            </div>
                          </div>
                        </div>

<div class="grow">
                              <p class="text-sm font-semibold text-foreground">
                                Project status updated
                              </p>
        
                              <p class="text-sm text-muted-foreground-1">
                                Marked
                                <a class="align-middle inline-flex items-center gap-x-1 text-primary decoration-2 hover:underline font-medium focus:outline-hidden focus:underline" href="#">
                                  <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="m6 14 1.45-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.55 6a2 2 0 0 1-1.94 1.5H4a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H18a2 2 0 0 1 2 2v2"/></svg>
                                  PR-3
                                </a>
                                as
                                <span class="ms-0.5 inline-block align-middle py-1 px-1.5 bg-surface text-xs font-medium text-layer-foreground rounded-md">
                                  In progress
                                </span>
                              </p>

<div class="relative last:pb-0 pb-8 last:after:hidden after:absolute after:top-9.5 after:bottom-0 after:inset-s-[19px] after:border-s after:border-line-2">
                          <div class="w-full flex gap-x-5">
                            <img class="shrink-0 size-9.5 rounded-full" src="https://images.unsplash.com/photo-1610186593977-82a3e3696e7f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">

<div class="grow">
                              <p class="text-sm font-semibold text-foreground">
                                Mark Colbert
                              </p>
        
                              <p class="text-sm text-muted-foreground-1">
                                Earned a "Top endorsed" badge
                              </p>

<div class="relative last:pb-0 pb-8 last:after:hidden after:absolute after:top-9.5 after:bottom-0 after:inset-s-[19px] after:border-s after:border-line-2">
                          <div class="w-full flex gap-x-5">
                            <span class="flex shrink-0 justify-center items-center size-9.5 bg-layer border border-layer-line text-sm font-semibold uppercase text-layer-foreground rounded-full">
                              D
                            </span>

<div class="grow">
                              <p class="text-sm font-semibold text-foreground">
                                David Lidell
                              </p>
        
                              <p class="text-sm text-muted-foreground-1">
                                Added a new member to Preline
                              </p>

<div class="relative last:pb-0 pb-8 last:after:hidden after:absolute after:top-9.5 after:bottom-0 after:inset-s-[19px] after:border-s after:border-line-2">
                          <div class="w-full flex gap-x-5">
                            <img class="shrink-0 size-9.5 rounded-full" src="https://images.unsplash.com/photo-1568048689711-5e0325cea8c0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">

<div class="grow">
                              <p class="text-sm font-semibold text-foreground">
                                Lana Robinson
                              </p>
        
                              <p class="text-sm text-muted-foreground-1">
                                Added 2 files to task
                                <a class="ms-1 align-middle inline-flex items-center gap-x-1 text-sm text-primary decoration-2 hover:underline focus:outline-hidden focus:underline font-medium" href="#">
                                  <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="m6 14 1.45-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.55 6a2 2 0 0 1-1.94 1.5H4a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H18a2 2 0 0 1 2 2v2"/></svg>
                                  PR-7
                                </a>
                              </p>
        
                              <div class="mt-2">
                                
                                <div class="grid grid-cols-2 gap-2">

<div class="inline-block bg-card border border-card-line rounded-lg p-2">
                                    <div class="flex gap-x-2">
                                      <svg class="shrink-0 size-6" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.0324 1.91994H9.45071C9.09999 1.91994 8.76367 2.05926 8.51567 2.30725C8.26767 2.55523 8.12839 2.89158 8.12839 3.24228V8.86395L20.0324 15.8079L25.9844 18.3197L31.9364 15.8079V8.86395L20.0324 1.91994Z" fill="#21A366"/><path d="M8.12839 8.86395H20.0324V15.8079H8.12839V8.86395Z" fill="#107C41"/><path d="M30.614 1.91994H20.0324V8.86395H31.9364V3.24228C31.9364 2.89158 31.7971 2.55523 31.5491 2.30725C31.3011 2.05926 30.9647 1.91994 30.614 1.91994Z" fill="#33C481"/><path d="M20.0324 15.8079H8.12839V28.3736C8.12839 28.7243 8.26767 29.0607 8.51567 29.3087C8.76367 29.5567 9.09999 29.6959 9.45071 29.6959H30.6141C30.9647 29.6959 31.3011 29.5567 31.549 29.3087C31.797 29.0607 31.9364 28.7243 31.9364 28.3736V22.7519L20.0324 15.8079Z" fill="#185C37"/><path d="M20.0324 15.8079H31.9364V22.7519H20.0324V15.8079Z" fill="#107C41"/><path opacity="0.1" d="M16.7261 6.87994H8.12839V25.7279H16.7261C17.0764 25.7269 17.4121 25.5872 17.6599 25.3395C17.9077 25.0917 18.0473 24.756 18.0484 24.4056V8.20226C18.0473 7.8519 17.9077 7.51616 17.6599 7.2684C17.4121 7.02064 17.0764 6.88099 16.7261 6.87994Z" class="fill-foreground" fill="currentColor"/><path opacity="0.2" d="M15.7341 7.87194H8.12839V26.7199H15.7341C16.0844 26.7189 16.4201 26.5792 16.6679 26.3315C16.9157 26.0837 17.0553 25.748 17.0564 25.3976V9.19426C17.0553 8.84386 16.9157 8.50818 16.6679 8.26042C16.4201 8.01266 16.0844 7.87299 15.7341 7.87194Z" class="fill-foreground" fill="currentColor"/><path opacity="0.2" d="M15.7341 7.87194H8.12839V24.7359H15.7341C16.0844 24.7349 16.4201 24.5952 16.6679 24.3475C16.9157 24.0997 17.0553 23.764 17.0564 23.4136V9.19426C17.0553 8.84386 16.9157 8.50818 16.6679 8.26042C16.4201 8.01266 16.0844 7.87299 15.7341 7.87194Z" class="fill-foreground" fill="currentColor"/><path opacity="0.2" d="M14.7421 7.87194H8.12839V24.7359H14.7421C15.0924 24.7349 15.4281 24.5952 15.6759 24.3475C15.9237 24.0997 16.0633 23.764 16.0644 23.4136V9.19426C16.0633 8.84386 15.9237 8.50818 15.6759 8.26042C15.4281 8.01266 15.0924 7.87299 14.7421 7.87194Z" class="fill-foreground" fill="currentColor"/><path d="M1.51472 7.87194H14.7421C15.0927 7.87194 15.4291 8.01122 15.6771 8.25922C15.925 8.50722 16.0644 8.84354 16.0644 9.19426V22.4216C16.0644 22.7723 15.925 23.1087 15.6771 23.3567C15.4291 23.6047 15.0927 23.7439 14.7421 23.7439H1.51472C1.16402 23.7439 0.827672 23.6047 0.579686 23.3567C0.3317 23.1087 0.192383 22.7723 0.192383 22.4216V9.19426C0.192383 8.84354 0.3317 8.50722 0.579686 8.25922C0.827672 8.01122 1.16402 7.87194 1.51472 7.87194Z" fill="#107C41"/><path d="M3.69711 20.7679L6.90722 15.794L3.96694 10.8479H6.33286L7.93791 14.0095C8.08536 14.3091 8.18688 14.5326 8.24248 14.68H8.26328C8.36912 14.4407 8.47984 14.2079 8.5956 13.9817L10.3108 10.8479H12.4822L9.46656 15.7663L12.5586 20.7679H10.2473L8.3932 17.2959C8.30592 17.148 8.23184 16.9927 8.172 16.8317H8.14424C8.09016 16.9891 8.01824 17.1399 7.92998 17.2811L6.02236 20.7679H3.69711Z" fill="white"/></svg>
                                      <div class="grow truncate">
                                        <p class="block truncate text-xs text-foreground">
                                          weekly-reports.xls
                                        </p>
                                        <small class="block text-xs text-muted-foreground">
                                          4kb
                                        </small>
                                      </div>
                                    </div>
                                  </div>
                                  
  
                                  
                                  <div class="inline-block bg-card border border-card-line rounded-lg p-2">
                                    <div class="flex gap-x-2">
                                      <svg class="shrink-0 size-6" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M30.6141 1.91994H9.45071C9.09999 1.91994 8.76367 2.05926 8.51567 2.30725C8.26767 2.55523 8.12839 2.89158 8.12839 3.24228V8.86395L20.0324 12.3359L31.9364 8.86395V3.24228C31.9364 2.89158 31.797 2.55523 31.549 2.30725C31.3011 2.05926 30.9647 1.91994 30.6141 1.91994Z" fill="#41A5EE"/><path d="M31.9364 8.86395H8.12839V15.8079L20.0324 19.2799L31.9364 15.8079V8.86395Z" fill="#2B7CD3"/><path d="M31.9364 15.8079H8.12839V22.7519L20.0324 26.2239L31.9364 22.7519V15.8079Z" fill="#185ABD"/><path d="M31.9364 22.752H8.12839V28.3736C8.12839 28.7244 8.26767 29.0607 8.51567 29.3087C8.76367 29.5567 9.09999 29.696 9.45071 29.696H30.6141C30.9647 29.696 31.3011 29.5567 31.549 29.3087C31.797 29.0607 31.9364 28.7244 31.9364 28.3736V22.752Z" fill="#103F91"/><path opacity="0.1" d="M16.7261 6.87994H8.12839V25.7279H16.7261C17.0764 25.7269 17.4121 25.5872 17.6599 25.3395C17.9077 25.0917 18.0473 24.756 18.0484 24.4056V8.20226C18.0473 7.8519 17.9077 7.51616 17.6599 7.2684C17.4121 7.02064 17.0764 6.88099 16.7261 6.87994Z" class="fill-foreground" fill="currentColor"/><path opacity="0.2" d="M15.7341 7.87194H8.12839V26.7199H15.7341C16.0844 26.7189 16.4201 26.5792 16.6679 26.3315C16.9157 26.0837 17.0553 25.748 17.0564 25.3976V9.19426C17.0553 8.84386 16.9157 8.50818 16.6679 8.26042C16.4201 8.01266 16.0844 7.87299 15.7341 7.87194Z" class="fill-foreground" fill="currentColor"/><path opacity="0.2" d="M15.7341 7.87194H8.12839V24.7359H15.7341C16.0844 24.7349 16.4201 24.5952 16.6679 24.3475C16.9157 24.0997 17.0553 23.764 17.0564 23.4136V9.19426C17.0553 8.84386 16.9157 8.50818 16.6679 8.26042C16.4201 8.01266 16.0844 7.87299 15.7341 7.87194Z" class="fill-foreground" fill="currentColor"/><path opacity="0.2" d="M14.7421 7.87194H8.12839V24.7359H14.7421C15.0924 24.7349 15.4281 24.5952 15.6759 24.3475C15.9237 24.0997 16.0633 23.764 16.0644 23.4136V9.19426C16.0633 8.84386 15.9237 8.50818 15.6759 8.26042C15.4281 8.01266 15.0924 7.87299 14.7421 7.87194Z" class="fill-foreground" fill="currentColor"/><path d="M1.51472 7.87194H14.7421C15.0927 7.87194 15.4291 8.01122 15.6771 8.25922C15.925 8.50722 16.0644 8.84354 16.0644 9.19426V22.4216C16.0644 22.7723 15.925 23.1087 15.6771 23.3567C15.4291 23.6047 15.0927 23.7439 14.7421 23.7439H1.51472C1.16401 23.7439 0.827669 23.6047 0.579687 23.3567C0.3317 23.1087 0.192383 22.7723 0.192383 22.4216V9.19426C0.192383 8.84354 0.3317 8.50722 0.579687 8.25922C0.827669 8.01122 1.16401 7.87194 1.51472 7.87194Z" fill="#185ABD"/><path d="M12.0468 20.7679H10.2612L8.17801 13.9231L5.99558 20.7679H4.20998L2.22598 10.8479H4.01158L5.40038 17.7919L7.48358 11.0463H8.97161L10.9556 17.7919L12.3444 10.8479H14.0308L12.0468 20.7679Z" fill="white"/></svg>
                                      <div class="grow truncate">
                                        <p class="block truncate text-xs text-foreground">
                                          monthly-reports.xls
                                        </p>
                                        <small class="block text-xs text-muted-foreground">
                                          12kb
                                        </small>
                                      </div>
                                    </div>
                                  </div>
                                  
                                </div>
                                
                              </div>

<div class="grow">
                                <p class="text-sm font-semibold text-foreground">
                                  David Lidell
                                </p>
          
                                <p class="text-sm text-muted-foreground-1">
                                  Added a new member to Preline
                                </p>

<div class="relative last:pb-0 pb-8 last:after:hidden after:absolute after:top-9.5 after:bottom-0 after:inset-s-[19px] after:border-s after:border-line-2">
                            <div class="w-full flex gap-x-5">
                              <span class="flex shrink-0 justify-center items-center size-9.5 bg-layer border border-layer-line text-sm font-semibold uppercase text-layer-foreground rounded-full">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
                              </span>

<div class="grow">
                                <p class="text-sm font-semibold text-foreground">
                                  Project status updated
                                </p>
          
                                <p class="text-sm text-muted-foreground-1">
                                  Marked
                                  <a class="align-middle inline-flex items-center gap-x-1 text-sm text-primary decoration-2 hover:underline focus:outline-hidden focus:underline font-medium" href="#">
                                    <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="m6 14 1.45-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.55 6a2 2 0 0 1-1.94 1.5H4a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H18a2 2 0 0 1 2 2v2"/></svg>
                                    PR-4
                                  </a>
                                  as
                                  <span class="ms-0.5 inline-block align-middle py-1 px-1.5 bg-surface text-xs font-medium text-layer-foreground rounded-md">
                                    In progress
                                  </span>
                                </p>

<div class="relative last:pb-0 pb-8 last:after:hidden after:absolute after:top-9.5 after:bottom-0 after:inset-s-[19px] after:border-s after:border-line-2">
                          <button type="button" class="hs-collapse-toggle hs-collapse-open:hidden group w-full text-start flex items-center gap-x-5 focus:outline-hidden" id="hs-pro-dnao" aria-expanded="false" aria-controls="hs-pro-dnao-button" data-hs-collapse="#hs-pro-dnao-button">
                            <span class="w-9.5">
                              <span class="flex shrink-0 justify-center items-center w-6 h-7 bg-layer border border-layer-line text-sm font-semibold text-layer-foreground rounded-md mx-auto">
                                <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 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
                              </span>
                            </span>

<span class="grow">
                              <span class="text-sm font-semibold text-foreground group-hover:text-primary-hover group-focus:text-primary-focus">
                                Show 2 more activities
                              </span>
                            </span>
                          </button>
                        </div>
                        
                      </div>
                      
                    </div>
                    
                  </div>

<div id="hs-pro-dasadam" 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-dasadam-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-lg sm:w-full m-3 sm:mx-auto h-[calc(100%-56px)] min-h-[calc(100%-56px)] flex items-center">
                      <div class="w-full max-h-full overflow-hidden 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-dasadam-label" class="font-medium text-foreground">
                            Add team account
                          </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-dasadam">
                            <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-pro-datab" class="overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                          <div class="p-4 space-y-5">
                            <div class="space-y-2">
                              <label for="hs-pro-dasadamtn" class="block mb-2 text-sm font-medium text-foreground">
                                Team name
                              </label>

<div class="space-y-2">
                              <label for="hs-pro-dasadamtn" class="block mb-2 text-sm font-medium text-foreground">
                                Subscription plan
                              </label>

<div class="relative">
                                <select data-hs-select='{
                                    "placeholder": "Select a plan",
                                    "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                                    "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 px-3 pe-9 flex text-nowrap w-full cursor-pointer bg-transparent border border-layer-line rounded-lg text-start text-sm text-muted-foreground-1 focus:outline-hidden focus:border-primary-focus focus:ring-1 focus:ring-primary-focus",
                                    "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",
                                    "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-muted-foreground-1\" 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-pro-datab"
                                  }' class="hidden">
                                  <option value="">Choose</option>
                                  <option>Pro (Monthly - $59 / user / month)</option>
                                  <option>Free - (Free forever)</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-dasadam">
                              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-dasadam">
                              Create team
                            </button>
                          </div>
                        </div>
                        
                      </div>
                    </div>
                  </div>

Open related admin dashboard template

Payments Dashboard Layout Pro

Fixed payments rail on the left with a centered transaction workspace beside it.

<div class="hs-tooltip [--placement:bottom] inline-block">
        <button type="button" class="hs-tooltip-toggle relative size-9.5 inline-flex justify-center items-center gap-x-2 border border-transparent text-foreground hover:bg-muted-hover focus:bg-muted-focus rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden" 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"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"></path><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"></path></svg>
        </button>
      </div>

<div class="hs-dropdown [--placement:bottom-right] relative inline-flex">
        <button id="hs-pro-pnnmd" type="button" class="size-9.5 inline-flex justify-center items-center gap-x-2 rounded-lg border border-transparent text-foreground 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">
          <img class="shrink-0 size-9.5 rounded-md" src="https://images.unsplash.com/photo-1724037231939-c4fa9bd69a84?q=80&w=180&h=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Avatar">
        </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-60 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-pnnmd">
          <div class="p-1">
            <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
              <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>
              Statements and reports
            </a>
            <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
              <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="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
              Settings
            </a>
            <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
              <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="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></svg>
              Help and Support
            </a>
            <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" x2="9" y1="12" y2="12"/></svg>
              Sign out
            </a>
          </div>
          <div class="p-1 border-t border-dropdown-divider">
            <button type="button" class="flex gap-x-3 py-2 px-3 w-full rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" data-hs-overlay="#hs-pro-dasadam">
              <svg class="shrink-0 size-4 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="12" cy="12" r="10"/><path d="M8 12h8"/><path d="M12 8v8"/></svg>
              Open a business account
            </button>
          </div>
        </div>
        
      </div>
      
    </div>
  </div>
</header>

<div class="p-5 text-center">
      <div class="flex size-24 rounded-full mx-auto mb-2">
        <img class="object-cover size-full rounded-full" src="https://images.unsplash.com/photo-1724037231939-c4fa9bd69a84?q=80&w=180&h=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Avatar">
      </div>

<p class="lg:hidden font-semibold text-foreground">
        Isabella Cruz
      </p>

<div class="hidden lg:block">
        
        <div class="hs-dropdown [--placement:bottom-right] relative inline-flex">
          <button id="hs-pro-dnsmd" type="button" class="py-1 px-2 inline-flex justify-center items-center gap-x-1 font-semibold rounded-lg text-foreground hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
            Isabella Cruz
            <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="m6 9 6 6 6-6"/></svg>
          </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-60 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-pnnmd">
            <div class="p-1">
              <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                <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>
                Statements and reports
              </a>
              <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                <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="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
                Settings
              </a>
              <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                <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="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></svg>
                Help and Support
              </a>
              <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" x2="9" y1="12" y2="12"/></svg>
                Sign out
              </a>
            </div>
            <div class="p-1 border-t border-dropdown-divider">
              <button type="button" class="flex gap-x-3 py-2 px-3 w-full rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" data-hs-overlay="#hs-pro-dasadam">
                <svg class="shrink-0 size-4 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="12" cy="12" r="10"/><path d="M8 12h8"/><path d="M12 8v8"/></svg>
                Open a business account
              </button>
            </div>
          </div>
          
        </div>
        
      </div>

<p class="text-xs text-muted-foreground-1">
        Membership number M2389310259
      </p>
    </div>

<div class="h-full overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
      
      <nav class="hs-accordion-group pt-0 w-full flex flex-col flex-wrap" data-hs-accordion-always-open>
        <ul class="p-4 space-y-1 border-y border-sidebar-1-divider">
          
          <li>
            <a class="flex py-2 px-3 text-sm text-sidebar-1-nav-foreground rounded-lg hover:bg-sidebar-1-nav-hover focus:outline-hidden focus:bg-sidebar-1-nav-focus " href="../../../templates/payments/payments-dashboard/index.html">
              <span class="w-5 me-3">
                <svg class="shrink-0 mt-0.5 size-4 mx-auto" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
              </span>
              Home
            </a>
          </li>

<li class="hs-accordion " id="balances-accordion">
            <button type="button" class="hs-accordion-toggle hs-accordion-active:bg-sidebar-1-nav-active w-full text-start flex py-2 px-3 text-sm text-sidebar-1-nav-foreground rounded-lg hover:bg-sidebar-1-nav-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-sidebar-1-nav-focus" aria-expanded="false" aria-controls="balances-accordion-sub">
              <span class="w-5 me-3">
                <svg class="shrink-0 mt-0.5 size-4 mx-auto" 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 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z"/><path d="m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z"/><path d="M7 21h10"/><path d="M12 3v18"/><path d="M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2"/></svg>
              </span>
              Balances

<div id="balances-accordion-sub" class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300" role="region" aria-labelledby="balances-accordion"  style="display: none;">
              <ul class="hs-accordion-group ps-8 mt-1 space-y-1 relative before:absolute before:top-0 before:inset-s-5 before:h-full before:border-s before:border-sidebar-1-nav-list-divider" data-hs-accordion-always-open>
                <li>
                  <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-1-nav-foreground rounded-lg hover:bg-sidebar-1-nav-hover focus:outline-hidden focus:bg-sidebar-1-nav-focus " href="../../../templates/payments/payments-dashboard/balances.html">
                    Overview
                  </a>
                </li>
                <li>
                  <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-1-nav-foreground rounded-lg hover:bg-sidebar-1-nav-hover focus:outline-hidden focus:bg-sidebar-1-nav-focus " href="../../../templates/payments/payments-dashboard/balances-empty-content.html">
                    Empty Content
                  </a>
                </li>
                <li>
                  <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-1-nav-foreground rounded-lg hover:bg-sidebar-1-nav-hover focus:outline-hidden focus:bg-sidebar-1-nav-focus " href="../../../templates/payments/payments-dashboard/balances-open-new.html">
                    Open New
                  </a>
                </li>
              </ul>
            </div>
          </li>

<li class="hs-accordion " id="transactions-accordion">
            <button type="button" class="hs-accordion-toggle hs-accordion-active:bg-sidebar-1-nav-active w-full text-start flex py-2 px-3 text-sm text-sidebar-1-nav-foreground rounded-lg hover:bg-sidebar-1-nav-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-sidebar-1-nav-focus" aria-expanded="false" aria-controls="transactions-accordion-sub">
              <span class="w-5 me-3">
                <svg class="shrink-0 mt-0.5 size-4 mx-auto" 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>
              </span>
              Transactions

<div id="transactions-accordion-sub" class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300" role="region" aria-labelledby="transactions-accordion"  style="display: none;">
              <ul class="hs-accordion-group ps-8 mt-1 space-y-1 relative before:absolute before:top-0 before:inset-s-5 before:h-full before:border-s before:border-sidebar-1-nav-list-divider" data-hs-accordion-always-open>
                <li>
                  <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-1-nav-foreground rounded-lg hover:bg-sidebar-1-nav-hover focus:outline-hidden focus:bg-sidebar-1-nav-focus " href="../../../templates/payments/payments-dashboard/transactions.html">
                    Overview
                  </a>
                </li>
                <li>
                  <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-1-nav-foreground rounded-lg hover:bg-sidebar-1-nav-hover focus:outline-hidden focus:bg-sidebar-1-nav-focus " href="../../../templates/payments/payments-dashboard/transactions-details.html">
                    Details
                  </a>
                </li>
              </ul>
            </div>
          </li>

<li class="hs-accordion " id="add-money-accordion">
            <button type="button" class="hs-accordion-toggle hs-accordion-active:bg-sidebar-1-nav-active w-full text-start flex py-2 px-3 text-sm text-sidebar-1-nav-foreground rounded-lg hover:bg-sidebar-1-nav-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-sidebar-1-nav-focus" aria-expanded="false" aria-controls="add-money-accordion-sub">
              <span class="w-5 me-3">
                <svg class="shrink-0 mt-0.5 size-4 mx-auto" 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="M5 12h14"/><path d="M12 5v14"/></svg>
              </span>
              Add Money

<div id="add-money-accordion-sub" class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300" role="region" aria-labelledby="add-money-accordion"  style="display: none;">
              <ul class="hs-accordion-group ps-8 mt-1 space-y-1 relative before:absolute before:top-0 before:inset-s-5 before:h-full before:border-s before:border-sidebar-1-nav-list-divider" data-hs-accordion-always-open>
                <li>
                  <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-1-nav-foreground rounded-lg hover:bg-sidebar-1-nav-hover focus:outline-hidden focus:bg-sidebar-1-nav-focus " href="../../../templates/payments/payments-dashboard/add-money.html">
                    Calculator
                  </a>
                </li>
                <li>
                  <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-1-nav-foreground rounded-lg hover:bg-sidebar-1-nav-hover focus:outline-hidden focus:bg-sidebar-1-nav-focus " href="../../../templates/payments/payments-dashboard/add-money-amount.html">
                    Amount
                  </a>
                </li>
                <li>
                  <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-1-nav-foreground rounded-lg hover:bg-sidebar-1-nav-hover focus:outline-hidden focus:bg-sidebar-1-nav-focus " href="../../../templates/payments/payments-dashboard/add-money-payment.html">
                    Payment
                  </a>
                </li>
                <li>
                  <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-1-nav-foreground rounded-lg hover:bg-sidebar-1-nav-hover focus:outline-hidden focus:bg-sidebar-1-nav-focus " href="../../../templates/payments/payments-dashboard/add-money-success-message.html">
                    Success Message
                  </a>
                </li>
              </ul>
            </div>
          </li>

<li class="hs-accordion " id="send-accordion">
            <button type="button" class="hs-accordion-toggle hs-accordion-active:bg-sidebar-1-nav-active w-full text-start flex py-2 px-3 text-sm text-sidebar-1-nav-foreground rounded-lg hover:bg-sidebar-1-nav-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-sidebar-1-nav-focus" aria-expanded="false" aria-controls="send-accordion-sub">
              <span class="w-5 me-3">
                <svg class="shrink-0 mt-0.5 size-4 mx-auto" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>
              </span>
              Send

<div id="send-accordion-sub" class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300" role="region" aria-labelledby="send-accordion"  style="display: none;">
              <ul class="hs-accordion-group ps-8 mt-1 space-y-1 relative before:absolute before:top-0 before:inset-s-5 before:h-full before:border-s before:border-sidebar-1-nav-list-divider" data-hs-accordion-always-open>
                <li>
                  <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-1-nav-foreground rounded-lg hover:bg-sidebar-1-nav-hover focus:outline-hidden focus:bg-sidebar-1-nav-focus " href="../../../templates/payments/payments-dashboard/send.html">
                    Overview
                  </a>
                </li>
                <li>
                  <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-1-nav-foreground rounded-lg hover:bg-sidebar-1-nav-hover focus:outline-hidden focus:bg-sidebar-1-nav-focus " href="../../../templates/payments/payments-dashboard/send-method.html">
                    Method
                  </a>
                </li>
                <li>
                  <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-1-nav-foreground rounded-lg hover:bg-sidebar-1-nav-hover focus:outline-hidden focus:bg-sidebar-1-nav-focus " href="../../../templates/payments/payments-dashboard/send-search-recipient.html">
                    Search Recipient
                  </a>
                </li>
                <li>
                  <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-1-nav-foreground rounded-lg hover:bg-sidebar-1-nav-hover focus:outline-hidden focus:bg-sidebar-1-nav-focus " href="../../../templates/payments/payments-dashboard/send-to-myself.html">
                    To Myself
                  </a>
                </li>
                <li>
                  <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-1-nav-foreground rounded-lg hover:bg-sidebar-1-nav-hover focus:outline-hidden focus:bg-sidebar-1-nav-focus " href="../../../templates/payments/payments-dashboard/send-to-someone-else.html">
                    To Seomeone Else
                  </a>
                </li>
                <li>
                  <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-1-nav-foreground rounded-lg hover:bg-sidebar-1-nav-hover focus:outline-hidden focus:bg-sidebar-1-nav-focus " href="../../../templates/payments/payments-dashboard/send-calculator.html">
                    Calculator
                  </a>
                </li>
                <li>
                  <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-1-nav-foreground rounded-lg hover:bg-sidebar-1-nav-hover focus:outline-hidden focus:bg-sidebar-1-nav-focus " href="../../../templates/payments/payments-dashboard/send-amount.html">
                    Amount
                  </a>
                </li>
                <li>
                  <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-1-nav-foreground rounded-lg hover:bg-sidebar-1-nav-hover focus:outline-hidden focus:bg-sidebar-1-nav-focus " href="../../../templates/payments/payments-dashboard/send-review.html">
                    Review
                  </a>
                </li>
                <li>
                  <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-1-nav-foreground rounded-lg hover:bg-sidebar-1-nav-hover focus:outline-hidden focus:bg-sidebar-1-nav-focus " href="../../../templates/payments/payments-dashboard/send-pay.html">
                    Pay
                  </a>
                </li>
                <li>
                  <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-1-nav-foreground rounded-lg hover:bg-sidebar-1-nav-hover focus:outline-hidden focus:bg-sidebar-1-nav-focus " href="../../../templates/payments/payments-dashboard/send-success-message.html">
                    Success Message
                  </a>
                </li>
              </ul>
            </div>
          </li>

<li class="hs-accordion " id="request-accordion">
            <button type="button" class="hs-accordion-toggle hs-accordion-active:bg-sidebar-1-nav-active w-full text-start flex py-2 px-3 text-sm text-sidebar-1-nav-foreground rounded-lg hover:bg-sidebar-1-nav-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-sidebar-1-nav-focus" aria-expanded="false" aria-controls="request-accordion-sub">
              <span class="w-5 me-3">
                <svg class="shrink-0 mt-0.5 size-4 mx-auto" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 7 7 17"/><path d="M17 17H7V7"/></svg>
              </span>
              Request

<div id="request-accordion-sub" class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300" role="region" aria-labelledby="request-accordion"  style="display: none;">
              <ul class="hs-accordion-group ps-8 mt-1 space-y-1 relative before:absolute before:top-0 before:inset-s-5 before:h-full before:border-s before:border-sidebar-1-nav-list-divider" data-hs-accordion-always-open>
                <li>
                  <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-1-nav-foreground rounded-lg hover:bg-sidebar-1-nav-hover focus:outline-hidden focus:bg-sidebar-1-nav-focus " href="../../../templates/payments/payments-dashboard/request.html">
                    Request
                  </a>
                </li>
                <li>
                  <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-1-nav-foreground rounded-lg hover:bg-sidebar-1-nav-hover focus:outline-hidden focus:bg-sidebar-1-nav-focus " href="../../../templates/payments/payments-dashboard/request-amount.html">
                    Amount
                  </a>
                </li>
                <li>
                  <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-1-nav-foreground rounded-lg hover:bg-sidebar-1-nav-hover focus:outline-hidden focus:bg-sidebar-1-nav-focus " href="../../../templates/payments/payments-dashboard/request-share.html">
                    Share
                  </a>
                </li>
              </ul>
            </div>
          </li>

<li class="hs-accordion " id="payments-accordion">
            <button type="button" class="hs-accordion-toggle hs-accordion-active:bg-sidebar-1-nav-active w-full text-start flex py-2 px-3 text-sm text-sidebar-1-nav-foreground rounded-lg hover:bg-sidebar-1-nav-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-sidebar-1-nav-focus" aria-expanded="false" aria-controls="payments-accordion-sub">
              <span class="w-5 me-3">
                <svg class="shrink-0 mt-0.5 size-4 mx-auto" 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="M11 15h2a2 2 0 1 0 0-4h-3c-.6 0-1.1.2-1.4.6L3 17"/><path d="m7 21 1.6-1.4c.3-.4.8-.6 1.4-.6h4c1.1 0 2.1-.4 2.8-1.2l4.6-4.4a2 2 0 0 0-2.75-2.91l-4.2 3.9"/><path d="m2 16 6 6"/><circle cx="16" cy="9" r="2.9"/><circle cx="6" cy="5" r="3"/></svg>
              </span>
              Payments

<div id="payments-accordion-sub" class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300" role="region" aria-labelledby="payments-accordion"  style="display: none;">
              <ul class="hs-accordion-group ps-8 mt-1 space-y-1 relative before:absolute before:top-0 before:inset-s-5 before:h-full before:border-s before:border-sidebar-1-nav-list-divider" data-hs-accordion-always-open>
                <li>
                  <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-1-nav-foreground rounded-lg hover:bg-sidebar-1-nav-hover focus:outline-hidden focus:bg-sidebar-1-nav-focus " href="../../../templates/payments/payments-dashboard/payments.html">
                    Overview
                  </a>
                </li>
                <li>
                  <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-1-nav-foreground rounded-lg hover:bg-sidebar-1-nav-hover focus:outline-hidden focus:bg-sidebar-1-nav-focus " href="../../../templates/payments/payments-dashboard/payments-details.html">
                    Details
                  </a>
                </li>
                <li>
                  <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-1-nav-foreground rounded-lg hover:bg-sidebar-1-nav-hover focus:outline-hidden focus:bg-sidebar-1-nav-focus " href="../../../templates/payments/payments-dashboard/requested-payment-details.html">
                    Requested Payment Details
                  </a>
                </li>
              </ul>
            </div>
          </li>

<li class="hs-accordion " id="cards-accordion">
            <button type="button" class="hs-accordion-toggle hs-accordion-active:bg-sidebar-1-nav-active w-full text-start flex py-2 px-3 text-sm text-sidebar-1-nav-foreground rounded-lg hover:bg-sidebar-1-nav-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-sidebar-1-nav-focus" aria-expanded="false" aria-controls="cards-accordion-sub">
              <span class="w-5 me-3">
                <svg class="shrink-0 mt-0.5 size-4 mx-auto" 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="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>
              </span>
              Cards

<div id="cards-accordion-sub" class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300" role="region" aria-labelledby="cards-accordion"  style="display: none;">
              <ul class="hs-accordion-group ps-8 mt-1 space-y-1 relative before:absolute before:top-0 before:inset-s-5 before:h-full before:border-s before:border-sidebar-1-nav-list-divider" data-hs-accordion-always-open>
                <li>
                  <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-1-nav-foreground rounded-lg hover:bg-sidebar-1-nav-hover focus:outline-hidden focus:bg-sidebar-1-nav-focus " href="../../../templates/payments/payments-dashboard/cards.html">
                    Cards
                  </a>
                </li>
                <li>
                  <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-1-nav-foreground rounded-lg hover:bg-sidebar-1-nav-hover focus:outline-hidden focus:bg-sidebar-1-nav-focus " href="../../../templates/payments/payments-dashboard/card-details.html">
                    Details
                  </a>
                </li>
                <li>
                  <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-1-nav-foreground rounded-lg hover:bg-sidebar-1-nav-hover focus:outline-hidden focus:bg-sidebar-1-nav-focus " href="../../../templates/payments/payments-dashboard/new-card-order-details.html">
                    New Card Order Details
                  </a>
                </li>
              </ul>
            </div>
          </li>

<li class="hs-accordion " id="order-card-accordion">
            <button type="button" class="hs-accordion-toggle hs-accordion-active:bg-sidebar-1-nav-active w-full text-start flex py-2 px-3 text-sm text-sidebar-1-nav-foreground rounded-lg hover:bg-sidebar-1-nav-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-sidebar-1-nav-focus" aria-expanded="false" aria-controls="order-card-accordion-sub">
              <span class="w-5 me-3">
                <svg class="shrink-0 mt-0.5 size-4 mx-auto" 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 12h8"/><path d="M12 8v8"/></svg>
              </span>
              Order Card

<div id="order-card-accordion-sub" class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300" role="region" aria-labelledby="order-card-accordion"  style="display: none;">
              <ul class="hs-accordion-group ps-8 mt-1 space-y-1 relative before:absolute before:top-0 before:inset-s-5 before:h-full before:border-s before:border-sidebar-1-nav-list-divider" data-hs-accordion-always-open>
                <li>
                  <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-1-nav-foreground rounded-lg hover:bg-sidebar-1-nav-hover focus:outline-hidden focus:bg-sidebar-1-nav-focus " href="../../../templates/payments/payments-dashboard/order-card.html">
                    Overview
                  </a>
                </li>
                <li>
                  <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-1-nav-foreground rounded-lg hover:bg-sidebar-1-nav-hover focus:outline-hidden focus:bg-sidebar-1-nav-focus " href="../../../templates/payments/payments-dashboard/order-card-address.html">
                    Address
                  </a>
                </li>
                <li>
                  <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-1-nav-foreground rounded-lg hover:bg-sidebar-1-nav-hover focus:outline-hidden focus:bg-sidebar-1-nav-focus " href="../../../templates/payments/payments-dashboard/order-card-payment.html">
                    Payment
                  </a>
                </li>
                <li>
                  <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-1-nav-foreground rounded-lg hover:bg-sidebar-1-nav-hover focus:outline-hidden focus:bg-sidebar-1-nav-focus " href="../../../templates/payments/payments-dashboard/order-card-verification.html">
                    Verification
                  </a>
                </li>
                <li>
                  <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-1-nav-foreground rounded-lg hover:bg-sidebar-1-nav-hover focus:outline-hidden focus:bg-sidebar-1-nav-focus " href="../../../templates/payments/payments-dashboard/order-card-upload-identity.html">
                    Upload Identity
                  </a>
                </li>
                <li>
                  <a class="flex gap-x-4 py-2 px-3 text-sm text-sidebar-1-nav-foreground rounded-lg hover:bg-sidebar-1-nav-hover focus:outline-hidden focus:bg-sidebar-1-nav-focus " href="../../../templates/payments/payments-dashboard/order-card-success-message.html">
                    Success Message
                  </a>
                </li>
              </ul>
            </div>
          </li>

<li>
            <a class="flex py-2 px-3 text-sm text-sidebar-1-nav-foreground rounded-lg hover:bg-sidebar-1-nav-hover focus:outline-hidden focus:bg-sidebar-1-nav-focus " href="../../../templates/payments/payments-dashboard/empty-states.html">
              <span class="w-5 me-3">
                <svg class="shrink-0 mt-0.5 size-4 mx-auto" 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 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg>
              </span>
              Empty Contents
            </a>
          </li>
          
        </ul>

<ul class="p-4 space-y-1">
          
          <li>
            <a class="flex py-2 px-3 text-sm text-sidebar-1-nav-foreground rounded-lg hover:bg-sidebar-1-nav-hover focus:outline-hidden focus:bg-sidebar-1-nav-focus " href="../../../templates/payments/payments-dashboard/recipients.html">
              <span class="w-5 me-3">
                <svg class="shrink-0 mt-0.5 size-4 mx-auto" 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>
              </span>
              Recipients
            </a>
          </li>

<li>
            <a class="flex py-2 px-3 text-sm text-sidebar-1-nav-foreground rounded-lg hover:bg-sidebar-1-nav-hover focus:outline-hidden focus:bg-sidebar-1-nav-focus " href="recipient-details.html">
              <img class="shrink-0 size-5 rounded-full me-3" src="https://images.unsplash.com/photo-1724037231939-c4fa9bd69a84?q=80&w=180&h=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Avatar">
              Isabella Cruz
            </a>
          </li>

<li>
            <a class="flex py-2 px-3 text-sm text-sidebar-1-nav-foreground rounded-lg hover:bg-sidebar-1-nav-hover focus:outline-hidden focus:bg-sidebar-1-nav-focus" href="recipient-details.html">
              <span class="flex justify-center items-center me-3 size-5 text-[10px] font-semibold uppercase bg-indigo-500 text-foreground-inverse rounded-full">
                M
              </span>
              Mark Doe
            </a>
          </li>

<li>
            <a class="flex py-2 px-3 text-sm text-sidebar-1-nav-foreground rounded-lg hover:bg-sidebar-1-nav-hover focus:outline-hidden focus:bg-sidebar-1-nav-focus" href="recipient-details.html">
              <img class="shrink-0 size-5 rounded-full me-3" src="https://images.unsplash.com/photo-1570654639102-bdd95efeca7a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
              Anna Richard
            </a>
          </li>
          
        </ul>
      </nav>
      
    </div>

<footer class="hidden lg:block py-2 px-5 border-t border-sidebar-1-divider">
      <div class="flex items-center">
        
        <a class="flex-none rounded-md text-xl inline-block font-semibold focus:outline-hidden focus:opacity-80" href="../../../templates/payments/payments-dashboard/index.html" aria-label="Preline">
          <svg class="w-20 h-auto" width="116" height="32" viewBox="0 0 116 32" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M33.5696 30.8182V11.3182H37.4474V13.7003H37.6229C37.7952 13.3187 38.0445 12.9309 38.3707 12.5369C38.7031 12.1368 39.134 11.8045 39.6634 11.5398C40.1989 11.2689 40.8636 11.1335 41.6577 11.1335C42.6918 11.1335 43.6458 11.4044 44.5199 11.946C45.3939 12.4815 46.0926 13.291 46.6158 14.3743C47.139 15.4515 47.4006 16.8026 47.4006 18.4276C47.4006 20.0095 47.1451 21.3452 46.6342 22.4347C46.1295 23.518 45.4401 24.3397 44.5661 24.8999C43.6982 25.4538 42.7256 25.7308 41.6484 25.7308C40.8852 25.7308 40.2358 25.6046 39.7003 25.3523C39.1709 25.0999 38.737 24.7829 38.3984 24.4013C38.0599 24.0135 37.8014 23.6226 37.6229 23.2287H37.5028V30.8182H33.5696ZM37.4197 18.4091C37.4197 19.2524 37.5367 19.9879 37.7706 20.6158C38.0045 21.2436 38.343 21.733 38.7862 22.0838C39.2294 22.4285 39.768 22.6009 40.402 22.6009C41.0421 22.6009 41.5838 22.4254 42.027 22.0746C42.4702 21.7176 42.8056 21.2251 43.0334 20.5973C43.2673 19.9633 43.3842 19.2339 43.3842 18.4091C43.3842 17.5904 43.2704 16.8703 43.0426 16.2486C42.8149 15.6269 42.4794 15.1406 42.0362 14.7898C41.593 14.4389 41.0483 14.2635 40.402 14.2635C39.7618 14.2635 39.2202 14.4328 38.777 14.7713C38.34 15.1098 38.0045 15.59 37.7706 16.2116C37.5367 16.8333 37.4197 17.5658 37.4197 18.4091ZM49.2427 25.5V11.3182H53.0559V13.7926H53.2037C53.4622 12.9124 53.8961 12.2476 54.5055 11.7983C55.1149 11.3428 55.8166 11.1151 56.6106 11.1151C56.8076 11.1151 57.02 11.1274 57.2477 11.152C57.4754 11.1766 57.6755 11.2105 57.8478 11.2536V14.7436C57.6632 14.6882 57.4077 14.639 57.0815 14.5959C56.7553 14.5528 56.4567 14.5312 56.1859 14.5312C55.6073 14.5312 55.0903 14.6574 54.6348 14.9098C54.1854 15.156 53.8284 15.5007 53.5638 15.9439C53.3052 16.3871 53.176 16.898 53.176 17.4766V25.5H49.2427ZM64.9043 25.777C63.4455 25.777 62.1898 25.4815 61.1373 24.8906C60.0909 24.2936 59.2845 23.4503 58.7182 22.3608C58.1519 21.2652 57.8688 19.9695 57.8688 18.4737C57.8688 17.0149 58.1519 15.7346 58.7182 14.6328C59.2845 13.531 60.0816 12.6723 61.1096 12.0568C62.1437 11.4413 63.3563 11.1335 64.7474 11.1335C65.683 11.1335 66.5539 11.2843 67.3603 11.5859C68.1728 11.8814 68.8806 12.3277 69.4839 12.9247C70.0932 13.5218 70.5672 14.2727 70.9057 15.1776C71.2443 16.0762 71.4135 17.1288 71.4135 18.3352V19.4155H59.4384V16.978H67.7111C67.7111 16.4117 67.588 15.91 67.3418 15.473C67.0956 15.036 66.754 14.6944 66.317 14.4482C65.8861 14.1958 65.3844 14.0696 64.812 14.0696C64.2149 14.0696 63.6856 14.2081 63.2239 14.4851C62.7684 14.7559 62.4114 15.1222 62.1529 15.5838C61.8944 16.0393 61.762 16.5471 61.7559 17.1072V19.4247C61.7559 20.1264 61.8851 20.7327 62.1437 21.2436C62.4083 21.7545 62.7807 22.1484 63.2608 22.4254C63.741 22.7024 64.3103 22.8409 64.9689 22.8409C65.406 22.8409 65.8061 22.7794 66.1692 22.6562C66.5324 22.5331 66.8432 22.3485 67.1018 22.1023C67.3603 21.8561 67.5572 21.5545 67.6927 21.1974L71.3304 21.4375C71.1458 22.3116 70.7672 23.0748 70.1948 23.7273C69.6285 24.3736 68.896 24.8783 67.9974 25.2415C67.1048 25.5985 66.0738 25.777 64.9043 25.777ZM77.1335 6.59091V25.5H73.2003V6.59091H77.1335ZM79.5043 25.5V11.3182H83.4375V25.5H79.5043ZM81.4801 9.49006C80.8954 9.49006 80.3937 9.29616 79.9752 8.90838C79.5628 8.51444 79.3566 8.04356 79.3566 7.49574C79.3566 6.95407 79.5628 6.48935 79.9752 6.10156C80.3937 5.70762 80.8954 5.51065 81.4801 5.51065C82.0649 5.51065 82.5635 5.70762 82.9759 6.10156C83.3944 6.48935 83.6037 6.95407 83.6037 7.49574C83.6037 8.04356 83.3944 8.51444 82.9759 8.90838C82.5635 9.29616 82.0649 9.49006 81.4801 9.49006ZM89.7415 17.3011V25.5H85.8083V11.3182H89.5569V13.8203H89.723C90.037 12.9955 90.5632 12.343 91.3019 11.8629C92.0405 11.3767 92.9361 11.1335 93.9887 11.1335C94.9735 11.1335 95.8322 11.349 96.5647 11.7798C97.2971 12.2107 97.8665 12.8262 98.2728 13.6264C98.679 14.4205 98.8821 15.3684 98.8821 16.4702V25.5H94.9489V17.1719C94.9551 16.304 94.7335 15.6269 94.2841 15.1406C93.8348 14.6482 93.2162 14.402 92.4283 14.402C91.8989 14.402 91.4311 14.5159 91.0249 14.7436C90.6248 14.9714 90.3109 15.3037 90.0831 15.7408C89.8615 16.1716 89.7477 16.6918 89.7415 17.3011ZM107.665 25.777C106.206 25.777 104.951 25.4815 103.898 24.8906C102.852 24.2936 102.045 23.4503 101.479 22.3608C100.913 21.2652 100.63 19.9695 100.63 18.4737C100.63 17.0149 100.913 15.7346 101.479 14.6328C102.045 13.531 102.842 12.6723 103.87 12.0568C104.905 11.4413 106.117 11.1335 107.508 11.1335C108.444 11.1335 109.315 11.2843 110.121 11.5859C110.934 11.8814 111.641 12.3277 112.245 12.9247C112.854 13.5218 113.328 14.2727 113.667 15.1776C114.005 16.0762 114.174 17.1288 114.174 18.3352V19.4155H102.199V16.978H110.472C110.472 16.4117 110.349 15.91 110.103 15.473C109.856 15.036 109.515 14.6944 109.078 14.4482C108.647 14.1958 108.145 14.0696 107.573 14.0696C106.976 14.0696 106.446 14.2081 105.985 14.4851C105.529 14.7559 105.172 15.1222 104.914 15.5838C104.655 16.0393 104.523 16.5471 104.517 17.1072V19.4247C104.517 20.1264 104.646 20.7327 104.905 21.2436C105.169 21.7545 105.542 22.1484 106.022 22.4254C106.502 22.7024 107.071 22.8409 107.73 22.8409C108.167 22.8409 108.567 22.7794 108.93 22.6562C109.293 22.5331 109.604 22.3485 109.863 22.1023C110.121 21.8561 110.318 21.5545 110.454 21.1974L114.091 21.4375C113.907 22.3116 113.528 23.0748 112.956 23.7273C112.389 24.3736 111.657 24.8783 110.758 25.2415C109.866 25.5985 108.835 25.777 107.665 25.777Z" class="fill-primary" fill="currentColor"/>
            <path d="M1 29.5V16.5C1 9.87258 6.37258 4.5 13 4.5C19.6274 4.5 25 9.87258 25 16.5C25 23.1274 19.6274 28.5 13 28.5H12" class="stroke-primary" stroke="currentColor" stroke-width="2"/>
            <path d="M5 29.5V16.66C5 12.1534 8.58172 8.5 13 8.5C17.4183 8.5 21 12.1534 21 16.66C21 21.1666 17.4183 24.82 13 24.82H12" class="stroke-primary" stroke="currentColor" stroke-width="2"/>
            <circle cx="13" cy="16.5214" r="5" class="fill-primary" fill="currentColor"/>
          </svg>
        </a>

<div class="lg:hidden absolute top-3 inset-e-3 z-10">
      <button type="button" class="w-6 h-7 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-md border border-line-2 bg-muted text-muted-foreground-1 hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-overlay="#hs-pro-sidebar">
        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="7 8 3 12 7 16"/><line x1="21" x2="11" y1="12" y2="12"/><line x1="21" x2="11" y1="6" y2="6"/><line x1="21" x2="11" y1="18" y2="18"/></svg>
      </button>
    </div>
    
  </div>
</aside>

<main id="content" class="lg:ps-65">
  <div class="max-w-4xl mx-auto py-5 sm:py-10 px-5 md:px-8 2xl:px-5">
    
    <div class="p-4 flex flex-col justify-center h-72 md:h-96 min-h-[calc(100vh-115px)] sm:min-h-[calc(100vh-80px)]  bg-layer border border-layer-line shadow-2xs rounded-xl">
      <div class="relative h-full border border-dashed border-black/10 dark:border-white/10 rounded-xl overflow-hidden">
        <div class="absolute inset-0 size-full">
          <div class="bg-[linear-gradient(45deg,rgba(0,0,0,0.1)_7.14%,transparent_7.14%,transparent_50%,rgba(0,0,0,0.1)_50%,rgba(0,0,0,0.1)_57.14%,transparent_57.14%,transparent)] dark:bg-[linear-gradient(45deg,rgba(255,255,255,0.1)_7.14%,transparent_7.14%,transparent_50%,rgba(255,255,255,0.1)_50%,rgba(255,255,255,0.1)_57.14%,transparent_57.14%,transparent)] bg-size-[10px_10px] size-full"></div>
        </div>
      </div>
    </div>
    
  </div>
</main>

Analytics Dashboard Layout Pro

Narrow analytics rail and top header framing one main reporting column.

<header class="lg:ms-65 lg:hidden fixed top-0 inset-x-0 flex flex-wrap md:justify-start md:flex-nowrap z-50 bg-navbar border-b border-navbar-line">
  <div class="flex justify-between xl:grid xl:grid-cols-3 basis-full items-center w-full py-2.5 px-2 sm:px-5">
    
    <div class="flex items-center gap-x-3">
      
      <a class="flex-none rounded-md text-xl inline-block font-semibold focus:outline-hidden focus:opacity-80" href="../../../templates/dashboards/analytics-dashboard/index.html" aria-label="Preline">
        <svg class="w-7 h-auto" width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M18.0835 3.23358C9.88316 3.23358 3.23548 9.8771 3.23548 18.0723V35.5832H0.583496V18.0723C0.583496 8.41337 8.41851 0.583252 18.0835 0.583252C27.7485 0.583252 35.5835 8.41337 35.5835 18.0723C35.5835 27.7312 27.7485 35.5614 18.0835 35.5614H16.7357V32.911H18.0835C26.2838 32.911 32.9315 26.2675 32.9315 18.0723C32.9315 9.8771 26.2838 3.23358 18.0835 3.23358Z" class="fill-primary" fill="currentColor"/>
          <path fill-rule="evenodd" clip-rule="evenodd" d="M18.0833 8.62162C12.8852 8.62162 8.62666 12.9245 8.62666 18.2879V35.5833H5.97468V18.2879C5.97468 11.5105 11.3713 5.97129 18.0833 5.97129C24.7954 5.97129 30.192 11.5105 30.192 18.2879C30.192 25.0653 24.7954 30.6045 18.0833 30.6045H16.7355V27.9542H18.0833C23.2815 27.9542 27.54 23.6513 27.54 18.2879C27.54 12.9245 23.2815 8.62162 18.0833 8.62162Z" class="fill-primary" fill="currentColor"/>
          <path d="M24.8225 18.1012C24.8225 21.8208 21.8053 24.8361 18.0833 24.8361C14.3614 24.8361 11.3442 21.8208 11.3442 18.1012C11.3442 14.3815 14.3614 11.3662 18.0833 11.3662C21.8053 11.3662 24.8225 14.3815 24.8225 18.1012Z" class="fill-primary" fill="currentColor"/>
        </svg>
      </a>

<div class="grow">
                <span class="text-sm font-semibold text-foreground">
                  James Collison
                </span>
                <p class="text-xs text-muted-foreground-1">
                  Preline@HS
                </p>
              </div>
            </a>
          </div>
          <div class="p-1">
            <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
              <svg class="shrink-0 mt-0.5 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"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>
              Billing
            </a>
            <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
              <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="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
              Settings
            </a>
            <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
              <svg class="shrink-0 mt-0.5 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="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
              My account
            </a>
          </div>
          <div class="px-4 py-3.5 border-y border-dropdown-divider">
            
            <div class="flex flex-wrap justify-between items-center gap-2">
              <label for="hs-pro-dnaddm" class="flex-1 cursor-pointer text-sm text-foreground">Dark mode</label>
              <label for="hs-pro-dnaddm" class="relative inline-block w-11 h-6 cursor-pointer">
                <input data-hs-theme-switch type="checkbox" id="hs-pro-dnaddm" 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>
          <div class="p-1">
            <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
              Customization
              <div class="ms-auto">
                <span class="ms-auto inline-flex items-center gap-1.5 py-px px-1.5 rounded-sm text-[10px] leading-4 font-medium bg-surface text-surface-foreground">
                  New
                </span>
              </div>
            </a>
            <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
              Manage team
            </a>
            <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
              Sign out
            </a>
          </div>
          <div class="p-1 border-t border-dropdown-divider">
            <button type="button" class="flex mt-0.5 gap-x-3 py-2 px-3 w-full rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" data-hs-overlay="#hs-pro-dasadam">
              <svg class="shrink-0 size-4 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="12" cy="12" r="10"/><path d="M8 12h8"/><path d="M12 8v8"/></svg>
              Add team account
            </button>
          </div>
        </div>
        
      </div>
      
    </div>
  </div>
</header>

<div class="h-full px-4 overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
        
        <ul class="flex flex-col items-center space-y-1">
          
          <li class="hs-tooltip [--placement:right] inline-block">
            <a class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-10 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-sidebar-nav-focus " href="#">
              <svg class="shrink-0 mt-0.5 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="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
              <span class="sr-only">Dashboard</span>
            </a>
            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
              Dashboard
            </span>
          </li>

<li class="hs-tooltip [--placement:right] inline-block">
            <a class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-10 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-sidebar-nav-focus" href="#">
              <svg class="shrink-0 mt-0.5 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>
              <span class="sr-only">Users</span>
            </a>
            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
              Users
            </span>
          </li>

<li class="hs-tooltip [--placement:right] inline-block">
            <a class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-10 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-sidebar-nav-focus" href="#">
              <svg class="shrink-0 mt-0.5 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 9 5 12 1.8-5.2L21 14Z"/><path d="M7.2 2.2 8 5.1"/><path d="m5.1 8-2.9-.8"/><path d="M14 4.1 12 6"/><path d="m6 12-1.9 2"/></svg>
              <span class="sr-only">Events</span>
            </a>
            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
              Events
            </span>
          </li>

<li class="hs-tooltip [--placement:right] inline-block">
            <a class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-10 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-sidebar-nav-focus" href="#">
              <svg class="shrink-0 mt-0.5 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="M17 18a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2"/><rect width="18" height="18" x="3" y="4" rx="2"/><circle cx="12" cy="10" r="2"/><line x1="8" x2="8" y1="2" y2="4"/><line x1="16" x2="16" y1="2" y2="4"/></svg>
              <span class="sr-only">Attributes</span>
            </a>
            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
              Attributes
            </span>
          </li>

<li class="hs-tooltip [--placement:right] inline-block">
            <a class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-10 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-sidebar-nav-focus" href="#">
              <svg class="shrink-0 mt-0.5 size-4 text-primary" 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="m16 12-4-4-4 4"/><path d="M12 16V8"/></svg>
              <span class="sr-only">Upgrade</span>
            </a>
            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
              Upgrade
            </span>
          </li>

<li class="hs-tooltip [--placement:right] inline-block">
            <a class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-10 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-sidebar-nav-focus" href="#">
              <svg class="shrink-0 mt-0.5 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="M12 22v-5"/><path d="M9 8V2"/><path d="M15 8V2"/><path d="M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z"/></svg>
              <span class="sr-only">Integrations</span>
            </a>
            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
              Integrations
            </span>
          </li>
          
        </ul>

</div>

<div class="grow">
                  <span class="text-sm font-semibold text-foreground">
                    James Collison
                  </span>
                  <p class="text-xs text-muted-foreground-1">
                    Preline@HS
                  </p>
                </div>
              </a>
            </div>
            <div class="p-1">
              <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                <svg class="shrink-0 mt-0.5 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"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>
                Billing
              </a>
              <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                <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="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
                Settings
              </a>
              <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                <svg class="shrink-0 mt-0.5 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="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                My account
              </a>
            </div>
            <div class="px-4 py-3.5 border-y border-dropdown-divider">
              
              <div class="flex flex-wrap justify-between items-center gap-2">
                <label for="hs-pro-dsaddm" class="flex-1 cursor-pointer text-sm text-foreground">Dark mode</label>
                <label for="hs-pro-dsaddm" class="relative inline-block w-11 h-6 cursor-pointer">
                  <input data-hs-theme-switch type="checkbox" id="hs-pro-dsaddm" 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>
            <div class="p-1">
              <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                Customization
                <div class="ms-auto">
                  <span class="ms-auto inline-flex items-center gap-1.5 py-px px-1.5 rounded-sm text-[10px] leading-4 font-medium bg-surface text-surface-foreground">
                    New
                  </span>
                </div>
              </a>
              <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                Manage team
              </a>
              <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                Sign out
              </a>
            </div>
            <div class="p-1 border-t border-dropdown-divider">
              <button type="button" class="flex mt-0.5 gap-x-3 py-2 px-3 w-full rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" data-hs-overlay="#hs-pro-dasadam">
                <svg class="shrink-0 size-4 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="12" cy="12" r="10"/><path d="M8 12h8"/><path d="M12 8v8"/></svg>
                Add team account
              </button>
            </div>
          </div>
          
        </div>
        
      </footer>

<div class="lg:hidden absolute top-4 -inset-e-6 z-10">
        <button type="button" class="w-6 h-7 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-e-md bg-layer border border-layer-line text-muted-foreground-1 hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-overlay="#hs-pro-sidebar">
          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="7 8 3 12 7 16"/><line x1="21" x2="11" y1="12" y2="12"/><line x1="21" x2="11" y1="6" y2="6"/><line x1="21" x2="11" y1="18" y2="18"/></svg>
        </button>
      </div>
      
    </div>

<div class="w-72 bg-sidebar border-x border-sidebar-line">
      <div class="flex flex-col h-full max-h-full">
        
        <div class="py-3 px-2 border-b border-sidebar-divider">
          <button type="button" class="py-1.5 ps-3 pe-1.5 w-full inline-flex items-center gap-x-2 text-sm rounded-lg bg-layer border border-layer-line text-muted-foreground-1 hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none">
            Quick actions
            <span class="ms-auto flex items-center gap-x-1 py-px px-1.5 border border-line-2 rounded-md">
              <svg class="shrink-0 size-2.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="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"/></svg>
              <span class="text-[11px] uppercase">k</span>
            </span>
          </button>
        </div>

<div class="h-full overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
          
          <nav class="hs-accordion-group size-full flex flex-col justify-between" data-hs-accordion-always-open>
            
            <div>
              <ul class="p-2 flex flex-col gap-y-1">
                
                <li>
                  <a class="flex gap-x-3 py-2 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus " href="../../../templates/dashboards/analytics-dashboard/index.html">
                    Overview
                  </a>
                </li>

<li>
                  <a class="flex gap-x-3 py-2 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus " href="../../../templates/dashboards/analytics-dashboard/survey.html">
                    Survey
                    <div class="ms-auto">
                      <span class="inline-flex items-center gap-1.5 py-px px-1.5 rounded-md text-[10px] leading-4 font-medium bg-layer border border-layer-line text-layer-foreground">
                        Beta
                      </span>
                    </div>
                  </a>
                </li>

<ul class="p-2 flex flex-col gap-y-1">
                
                <li class="hs-accordion active" id="projects-accordion">
                  <button type="button" class="hs-accordion-toggle py-1 px-3 flex justify-center items-center gap-x-1 text-xs text-muted-foreground-1 rounded-md hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-hover" aria-expanded="true" aria-controls="projects-accordion-sub">
                    <svg class="hs-accordion-active:rotate-90 shrink-0 size-3 transition" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                    Channels
                  </button>

<li>
                        <a class="flex items-center gap-x-2 py-2 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus" href="../../../blocks/">
                          <span class="flex justify-center items-center size-6 bg-primary text-primary-foreground rounded-md">
                            <svg class="shrink-0 size-3" 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="18" height="7" x="3" y="3" rx="1"/><rect width="9" height="7" x="3" y="14" rx="1"/><rect width="5" height="7" x="16" y="14" rx="1"/></svg>
                          </span>
                          Blocks
                        </a>
                      </li>

<li>
                        <a class="flex items-center gap-x-2 py-2 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus" href="../../../templates/">
                          <span class="flex justify-center items-center size-6 bg-primary text-primary-foreground rounded-md">
                            <svg class="shrink-0 size-3" 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 x="2" y="4" width="20" height="16" rx="2"/><path d="M10 4v4"/><path d="M2 8h20"/><path d="M6 4v4"/></svg>
                          </span>
                          Templates
                        </a>
                      </li>
                      
                    </ul>
                  </div>
                </li>
                
              </ul>
            </div>

<footer class="p-2 pb-4 flex flex-col gap-y-3">
              
              <a class="p-3 group flex flex-col bg-card border border-card-line rounded-xl hover:border-line-3 focus:outline-hidden focus:border-line-3" href="#">
                <div class="flex justify-between items-center gap-x-1">
                  <div class="grow">
                    <p class="font-medium text-sm text-foreground">
                      65/100 credits used
                    </p>
                    <p class="text-wrap text-xs text-muted-foreground-1">
                      Invite team members
                    </p>
                    <p class="mt-2 flex items-center gap-1 text-xs text-primary">
                      <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/></svg>
                      Upgrade now
                      <svg class="shrink-0 size-3.5 text-primary opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition duration-300" 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 class="lg:opacity-0 lg:-translate-x-1 lg:group-hover:opacity-100 lg:group-hover:translate-x-0 lg:transition" d="M5 12h14"/><path class="lg:-translate-x-1.5 lg:group-hover:translate-x-0 lg:transition" d="m12 5 7 7-7 7"/></svg>
                    </p>
                  </div>

<div class="relative size-14">
                    <svg class="size-full -rotate-90" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
                      
                      <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-primary-100 dark:text-primary-500/40" stroke-width="4"></circle>
                      
                      <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-primary" stroke-width="4" stroke-dasharray="100" stroke-dashoffset="35" stroke-linecap="round"></circle>
                    </svg>
                  </div>
                  
                </div>
              </a>

<a class="group flex flex-col bg-card border border-card-line rounded-xl hover:border-line-3 focus:outline-hidden focus:border-line-3 transition duration-300" href="#">
                <div class="p-2 w-full h-32 rounded-md">
                  <img class="size-full object-cover rounded-md dark:hidden" src="../../../assets/img/demo-previews/img32.webp" alt="Card Image">
                  <img class="size-full object-cover rounded-md dark:block hidden" src="../../../assets/img/demo-previews-dark/img32.webp" alt="Card Image">
                </div>
  
                <div class="p-3">
                  <div class="flex items-center gap-2">
                    <div class="grow">
                      <p class="text-wrap text-xs text-muted-foreground-1">
                        New
                      </p>
                      <p class="text-wrap font-medium text-sm text-foreground group-hover:text-primary group-focus:text-primary">
                        Preline Startup Demo
                      </p>
                    </div>
  
                    <svg class="shrink-0 size-3.5 text-primary opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition duration-300" 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 class="lg:opacity-0 lg:-translate-x-1 lg:group-hover:opacity-100 lg:group-hover:translate-x-0 lg:transition" d="M5 12h14"/><path class="lg:-translate-x-1.5 lg:group-hover:translate-x-0 lg:transition" d="m12 5 7 7-7 7"/></svg>
                  </div>
                </div>
              </a>
              
            </footer>
            
          </nav>

</div>
        
      </div>
    </div>
    
  </div>
</aside>

<main id="content" class="lg:ps-82 pt-15 lg:pt-0">
  <div class="p-2 sm:p-5 sm:py-0 sm:py-5 space-y-5">
    
    <div class="p-4 flex flex-col justify-center h-72 md:h-96 min-h-[calc(100vh-115px)] sm:min-h-[calc(100vh-40px)]  bg-layer border border-layer-line shadow-2xs rounded-xl">
      <div class="relative h-full border border-dashed border-black/10 dark:border-white/10 rounded-xl overflow-hidden">
        <div class="absolute inset-0 size-full">
          <div class="bg-[linear-gradient(45deg,rgba(0,0,0,0.1)_7.14%,transparent_7.14%,transparent_50%,rgba(0,0,0,0.1)_50%,rgba(0,0,0,0.1)_57.14%,transparent_57.14%,transparent)] dark:bg-[linear-gradient(45deg,rgba(255,255,255,0.1)_7.14%,transparent_7.14%,transparent_50%,rgba(255,255,255,0.1)_50%,rgba(255,255,255,0.1)_57.14%,transparent_57.14%,transparent)] bg-size-[10px_10px] size-full"></div>
        </div>
      </div>
    </div>
    
  </div>
</main>

Files Workspace Layout Pro

File-navigation rail and top header framing one wide workspace column.

<header class="lg:ms-65 relative flex flex-wrap md:justify-start md:flex-nowrap z-50 bg-navbar">
  <div class="flex justify-between xl:grid xl:grid-cols-3 basis-full items-center w-full py-2.5 px-4 sm:px-7">
    <div class="xl:col-span-1 flex items-center md:gap-x-3">
      <div class="lg:hidden">
        
        <button type="button" class="w-7 h-9.5 inline-flex justify-center 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" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-pro-sidebar" aria-label="Toggle navigation" data-hs-overlay="#hs-pro-sidebar">
          <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="M17 8L21 12L17 16M3 12H13M3 6H13M3 18H13"/></svg>
        </button>
        
      </div>
      
      <div class="hidden lg:block min-w-80 xl:w-full">
        
        <div class="relative">
          <div class="absolute inset-y-0 inset-s-0 flex items-center pointer-events-none z-20 ps-3.5">
            <svg class="shrink-0 size-4 text-muted-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="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
          </div>
          <input type="text" class="py-1.5 sm:py-2 ps-10 pe-8 block w-full bg-surface border-transparent text-surface-foreground placeholder:text-muted-foreground-1 rounded-lg sm:text-sm focus:bg-layer focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none" placeholder="Search projects, files or people">
          <div class="hidden absolute inset-y-0 inset-e-0 flex items-center z-20 pe-1">
            <button type="button" class="inline-flex shrink-0 justify-center items-center size-6 rounded-full text-muted-foreground-1 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" aria-label="Close">
              <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"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
            </button>
          </div>
        </div>
        
      </div>
    </div>

<div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
          <div class="hs-tooltip [--placement:bottom] inline-block">
            <button id="hs-pro-dnnd" type="button" class="hs-tooltip-toggle relative size-9.5 inline-flex justify-center items-center gap-x-2 border border-transparent text-muted-foreground-1 hover:bg-muted-hover focus:bg-muted-focus rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden" 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"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
              <span class="flex absolute top-0 inset-e-0 z-10 -mt-1.5 -me-1.5">
                <span class="animate-ping absolute inline-flex size-full rounded-full bg-red-400 opacity-75 dark:bg-red-600"></span>
                <span class="relative min-w-4.5 min-h-4.5 inline-flex justify-center items-center text-[10px] bg-red-500 text-foreground-inverse rounded-full px-1">
                  2
                </span>
              </span>
            </button>
            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
              Notifications
            </span>
          </div>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-full sm:w-96 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border-t border-dropdown-line sm:border sm:rounded-lg shadow-md sm:shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dnnd">
            
            <div class="px-5 pt-3 flex justify-between items-center border-b border-dropdown-divider">
              
              <nav  class="flex gap-1" aria-label="Tabs" role="tablist" aria-orientation="horizontal">
                <button type="button" class="hs-tab-active:after:bg-secondary hs-tab-active:text-foreground px-2 py-1.5 mb-2 relative inline-flex justify-center items-center gap-x-2 hover:bg-muted-hover text-muted-foreground-1 hover:text-foreground text-sm rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus text-muted-foreground-1 focus:text-foreground after:absolute after:-bottom-2 after:inset-x-2 after:z-10 after:h-0.5 after:pointer-events-none disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden active" id="hs-pro-tabs-dnn-item-all" aria-selected="true" data-hs-tab="#hs-pro-tabs-dnn-all" aria-controls="hs-pro-tabs-dnn-all" role="tab" >
                  All
                </button>
                <button type="button" class="hs-tab-active:after:bg-secondary hs-tab-active:text-foreground px-2 py-1.5 mb-2 relative inline-flex justify-center items-center gap-x-2 hover:bg-muted-hover text-muted-foreground-1 hover:text-foreground text-sm rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus text-muted-foreground-1 focus:text-foreground after:absolute after:-bottom-2 after:inset-x-2 after:z-10 after:h-0.5 after:pointer-events-none disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden " id="hs-pro-tabs-dnn-item-archived" aria-selected="false" data-hs-tab="#hs-pro-tabs-dnn-archived" aria-controls="hs-pro-tabs-dnn-archived" role="tab" >
                  Archived
                </button>
              </nav>
              
      
              
              <div class="hs-tooltip relative inline-block mb-3">
                <a class="hs-tooltip-toggle size-7 inline-flex justify-center items-center gap-x-2 rounded-full 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" href="../../../templates/dashboards/admin-dashboard/account-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" ><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
                </a>
                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                  Preferences
                </span>
              </div>
              
            </div>

<div id="hs-pro-tabs-dnn-all" role="tabpanel" aria-labelledby="hs-pro-tabs-dnn-item-all">
              <div class="h-120 overflow-y-auto overflow-hidden [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                <ul class="divide-y divide-dropdown-divider">
                  
                  <li class="relative group w-full flex gap-x-5 text-start bg-surface p-5">
                    <div class="relative shrink-0">
                      <img class="shrink-0 size-9.5 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="Avatar">
                      <span class="absolute top-4 -inset-s-3 size-2 bg-primary rounded-full"></span>
                    </div>
                    <div class="grow">
                      <p class="text-xs text-muted-foreground-1">
                        2 hours ago
                      </p>
                      
                      <span class="block text-sm font-medium text-foreground">
                        Eilis Warner
                      </span>
                      <p class="text-sm text-muted-foreground-1">
                        changed an issue from 'in Progress' to 'Review'
                      </p>
                    </div>
  
                    <div>
                      <div class="sm:group-hover:opacity-100 sm:opacity-0 sm:absolute sm:top-5 sm:inset-e-5">
                        
                        <div class="inline-block p-0.5 bg-card border border-card-line rounded-lg shadow-2xs transition ease-out">    
                          <div class="flex items-center">
                            <div class="hs-tooltip relative inline-block">
                              <button type="button" class="hs-tooltip-toggle size-7 flex shrink-0 justify-center items-center text-muted-foreground-1 hover:bg-muted-hover hover:text-foreground rounded-sm disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
                                <svg class="shrink-0 size-4 hidden" 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="18" height="18" x="3" y="3" rx="2"/><path d="M8 12h8"/></svg>
                              </button>
                              <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                Mark this notification as read
                              </span>
                            </div>
                            <div class="hs-tooltip relative inline-block">
                              <button type="button" class="hs-tooltip-toggle size-7 flex shrink-0 justify-center items-center text-muted-foreground-1 hover:bg-muted-hover hover:text-foreground rounded-sm disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                <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"><rect width="20" height="5" x="2" y="4" rx="2"/><path d="M4 9v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9"/><path d="M10 13h4"/></svg>
                              </button>
                              <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                Archive this notification
                              </span>
                            </div>
                          </div>
                        </div>
                        
                      </div>
                    </div>
                  </li>

<li class="relative group w-full flex gap-x-5 text-start  p-5">
                    <div class="relative shrink-0">
                      <span class="flex shrink-0 justify-center items-center size-9.5 bg-layer border border-layer-line text-layer-foreground text-sm font-semibold rounded-full shadow-2xs">
                        P
                      </span>
                    </div>
                    <div class="grow">
                      <p class="text-xs text-muted-foreground-1">
                        5 Jan 2023
                      </p>
                      
                      <span class="block text-sm font-medium text-foreground">
                        New Update on Preline
                      </span>
                      <p class="text-sm text-muted-foreground-1">
                        Add yourself to our new “Hire Page”. Let visitors know you’re open to freelance or full-time work.
                      </p>
                      <a class="mt-2 p-1.5 inline-flex items-center border border-card-line rounded-xl hover:bg-layer-hover hover:shadow-2xs focus:outline-hidden focus:bg-layer-focus" href="#">
                        <img class="w-17.5 h-15.5 object-cover rounded-lg" src="https://images.unsplash.com/photo-1670272505340-d906d8d77d03?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" alt="Avatar">
                        <div class="grow py-2.5 px-4">
                          <p class="text-sm font-medium text-foreground">
                            Get hired!
                          </p>
                          <p class="inline-flex items-center gap-x-1 text-sm text-muted-foreground-1">
                            Get started
                            <svg class="shrink-0 size-4 transition ease-in-out group-hover:translate-x-1 group-focus:translate-x-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="m9 18 6-6-6-6"/></svg>
                          </p>
                        </div>
                      </a>
                    </div>
  
                    <div>
                      <div class="sm:group-hover:opacity-100 sm:opacity-0 sm:absolute sm:top-5 sm:inset-e-5">
                        
                        <div class="inline-block p-0.5 bg-card border border-card-line rounded-lg shadow-2xs transition ease-out">    
                          <div class="flex items-center">
                            <div class="hs-tooltip relative inline-block">
                              <button type="button" class="hs-tooltip-toggle size-7 flex shrink-0 justify-center items-center text-muted-foreground-1 hover:bg-muted-hover hover:text-foreground rounded-sm disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
                                <svg class="shrink-0 size-4 hidden" 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="18" height="18" x="3" y="3" rx="2"/><path d="M8 12h8"/></svg>
                              </button>
                              <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                Mark this notification as read
                              </span>
                            </div>
                            <div class="hs-tooltip relative inline-block">
                              <button type="button" class="hs-tooltip-toggle size-7 flex shrink-0 justify-center items-center text-muted-foreground-1 hover:bg-muted-hover hover:text-foreground rounded-sm disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                <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"><rect width="20" height="5" x="2" y="4" rx="2"/><path d="M4 9v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9"/><path d="M10 13h4"/></svg>
                              </button>
                              <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                Archive this notification
                              </span>
                            </div>
                          </div>
                        </div>
                        
                      </div>
                    </div>
                  </li>

<li class="relative group w-full flex gap-x-5 text-start  p-5">
                    <div class="relative shrink-0">
                      <span class="flex shrink-0 justify-center items-center size-9.5 bg-layer border border-layer-line text-layer-foreground text-sm font-semibold rounded-full shadow-2xs">
                        P
                      </span>
                    </div>
                    <div class="grow">
                      <p class="text-xs text-muted-foreground-1">
                        5 Jan 2023
                      </p>
                      
                      <span class="block text-sm font-medium text-foreground">
                        We’re updating our Privacy Policy as of 10th January 2023.content
                      </span>
                      <p>
                        <a class="inline-flex items-center gap-x-1 text-sm text-primary decoration-2 hover:underline font-medium focus:outline-hidden focus:underline" href="#">
                          Learn more
                          <svg class="shrink-0 size-4 transition ease-in-out group-hover:translate-x-1 group-focus:translate-x-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="m9 18 6-6-6-6"/></svg>
                        </a>
                      </p>
                    </div>
  
                    <div>
                      <div class="sm:group-hover:opacity-100 sm:opacity-0 sm:absolute sm:top-5 sm:inset-e-5">
                        
                        <div class="inline-block p-0.5 bg-card border border-card-line rounded-lg shadow-2xs transition ease-out">    
                          <div class="flex items-center">
                            <div class="hs-tooltip relative inline-block">
                              <button type="button" class="hs-tooltip-toggle size-7 flex shrink-0 justify-center items-center text-muted-foreground-1 hover:bg-muted-hover hover:text-foreground rounded-sm disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
                                <svg class="shrink-0 size-4 hidden" 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="18" height="18" x="3" y="3" rx="2"/><path d="M8 12h8"/></svg>
                              </button>
                              <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                Mark this notification as read
                              </span>
                            </div>
                            <div class="hs-tooltip relative inline-block">
                              <button type="button" class="hs-tooltip-toggle size-7 flex shrink-0 justify-center items-center text-muted-foreground-1 hover:bg-muted-hover hover:text-foreground rounded-sm disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                <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"><rect width="20" height="5" x="2" y="4" rx="2"/><path d="M4 9v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9"/><path d="M10 13h4"/></svg>
                              </button>
                              <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                Archive this notification
                              </span>
                            </div>
                          </div>
                        </div>
                        
                      </div>
                    </div>
                  </li>

<li class="relative group w-full flex gap-x-5 text-start bg-surface p-5">
                    <div class="relative shrink-0">
                      <img class="shrink-0 size-9.5 rounded-full" src="https://images.unsplash.com/photo-1614880353165-e56fac2ea9a8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">
                      <span class="absolute top-4 -inset-s-3 size-2 bg-primary rounded-full"></span>
                    </div>
                    <div class="grow">
                      <p class="text-xs text-muted-foreground-1">
                        31 Dec 2022
                      </p>
                      
                      <span class="block text-sm font-medium text-foreground">
                        Rubia Walter
                      </span>
                      <p class="text-sm text-muted-foreground-1">
                        Joined the Slack group HS Team
                      </p>
                    </div>
  
                    <div>
                      <div class="sm:group-hover:opacity-100 sm:opacity-0 sm:absolute sm:top-5 sm:inset-e-5">
                        
                        <div class="inline-block p-0.5 bg-card border border-card-line rounded-lg shadow-2xs transition ease-out">    
                          <div class="flex items-center">
                            <div class="hs-tooltip relative inline-block">
                              <button type="button" class="hs-tooltip-toggle size-7 flex shrink-0 justify-center items-center text-muted-foreground-1 hover:bg-muted-hover hover:text-foreground rounded-sm disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
                                <svg class="shrink-0 size-4 hidden" 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="18" height="18" x="3" y="3" rx="2"/><path d="M8 12h8"/></svg>
                              </button>
                              <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                Mark this notification as read
                              </span>
                            </div>
                            <div class="hs-tooltip relative inline-block">
                              <button type="button" class="hs-tooltip-toggle size-7 flex shrink-0 justify-center items-center text-muted-foreground-1 hover:bg-muted-hover hover:text-foreground rounded-sm disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                <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"><rect width="20" height="5" x="2" y="4" rx="2"/><path d="M4 9v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9"/><path d="M10 13h4"/></svg>
                              </button>
                              <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                Archive this notification
                              </span>
                            </div>
                          </div>
                        </div>
                        
                      </div>
                    </div>
                  </li>
                  
                </ul>
                
              </div>

<div class="text-center border-t border-dropdown-divider">
                <a class="p-4 flex justify-center items-center gap-x-2 text-sm text-muted-foreground-1 font-medium sm:rounded-b-lg hover:text-primary-hover focus:outline-hidden focus:text-primary-hover" href="#">
                  <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 7 17l-5-5"/><path d="m22 10-7.5 7.5L13 16"/></svg>
                  Mark all as read
                </a>
              </div>
              
            </div>

<div id="hs-pro-tabs-dnn-archived" class="hidden" role="tabpanel" aria-labelledby="hs-pro-tabs-dnn-item-archived">
              
              <div class="p-5 min-h-134 flex flex-col justify-center items-center text-center">
                <svg class="w-48 mx-auto mb-4" width="178" height="90" viewBox="0 0 178 90" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect x="27" y="50.5" width="124" height="39" rx="7.5" fill="currentColor" class="fill-layer opacity-30"/>
                  <rect x="27" y="50.5" width="124" height="39" rx="7.5" stroke="currentColor" class="stroke-line-1 opacity-30"/>
                  <rect x="34.5" y="58" width="24" height="24" rx="4" fill="currentColor" class="fill-surface-1 opacity-30"/>
                  <rect x="66.5" y="61" width="60" height="6" rx="3" fill="currentColor" class="fill-surface-1 opacity-30"/>
                  <rect x="66.5" y="73" width="77" height="6" rx="3" fill="currentColor" class="fill-surface-1 opacity-30"/>
                  <rect x="19.5" y="28.5" width="139" height="39" rx="7.5" fill="currentColor" class="fill-layer"/>
                  <rect x="19.5" y="28.5" width="139" height="39" rx="7.5" stroke="currentColor" class="stroke-line-1"/>
                  <rect x="27" y="36" width="24" height="24" rx="4" fill="currentColor" class="fill-surface-1"/>
                  <rect x="59" y="39" width="60" height="6" rx="3" fill="currentColor" class="fill-surface-1"/>
                  <rect x="59" y="51" width="92" height="6" rx="3" fill="currentColor" class="fill-surface-1"/>
                  <g filter="url(#filter15)">
                  <rect x="12" y="6" width="154" height="40" rx="8" fill="currentColor" class="fill-layer" shape-rendering="crispEdges"/>
                  <rect x="12.5" y="6.5" width="153" height="39" rx="7.5" stroke="currentColor" class="stroke-line-1" shape-rendering="crispEdges"/>
                  <rect x="20" y="14" width="24" height="24" rx="4" fill="currentColor" class="fill-surface-1"/>
                  <rect x="52" y="17" width="60" height="6" rx="3" fill="currentColor" class="fill-surface-1"/>
                  <rect x="52" y="29" width="106" height="6" rx="3" fill="currentColor" class="fill-surface-1"/>
                  </g>
                  <defs>
                  <filter id="filter15" x="0" y="0" width="178" height="64" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                  <feFlood flood-opacity="0" result="BackgroundImageFix"/>
                  <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
                  <feOffset dy="6"/>
                  <feGaussianBlur stdDeviation="6"/>
                  <feComposite in2="hardAlpha" operator="out"/>
                  <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0"/>
                  <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1187_14810"/>
                  <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1187_14810" result="shape"/>
                  </filter>
                  </defs>
                </svg>

<div class="max-w-sm mx-auto">
                  <p class="mt-2 font-medium text-foreground">
                    No archived notifications
                  </p>
                  <p class="mb-5 text-sm text-muted-foreground-1">
                    No data here yet. We will notify you when there's an update.
                  </p>
                </div>

<a class="py-2 px-3 inline-flex items-center gap-x-2 text-xs 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="#">
                  Notifications settings
                </a>
              </div>
              
            </div>
            
          </div>
        </div>

</div>

<div class="hs-dropdown [--placement:top-right] [--strategy:absolute] [--auto-close:inside] relative inline-flex">
        
        <button id="hs-pro-fadm" type="button" class="px-1.5 py-[5px] min-h-9.5 hs-dropdown-toggle flex shrink-0 items-center gap-x-1 text-start text-foreground hover:bg-muted-hover rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
          <img class="shrink-0 size-7 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="Avatar">
          <span class="grow hidden sm:block mx-1 max-w-32 truncate">
            <span class="block truncate text-sm font-medium">
              James Collison
            </span>
          </span>
          <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 9 6 6 6-6"/></svg>
        </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 inset-s-2.5 w-56 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-fadm">
          <div class="p-1">
            <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
              <span class="flex justify-center items-center size-6">
                <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"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>
              </span>
              Billing
            </a>
            <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
              <span class="flex justify-center items-center size-6">
                <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="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
              </span>
              Settings
            </a>
            <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
              <span class="flex justify-center items-center size-6">
                <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>
              </span>
              Manage team
            </a>
            <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
              <span class="flex justify-center items-center size-6">
                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" x2="9" y1="12" y2="12"/></svg>
              </span>
              Sign out
            </a>
          </div>
          <div class="p-1 border-t border-dropdown-divider">
            <button type="button" class="flex items-center gap-x-3 py-2 px-3 w-full text-start rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
              <img class="shrink-0 size-6 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="Avatar">
              <span class="grow block max-w-32">
                <span class="block truncate text-sm font-medium text-foreground">
                  James Collison
                </span>
                <span class="block truncate text-xs text-muted-foreground-1">
                  james@site.com
                </span>
              </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"><polyline points="20 6 9 17 4 12"/></svg>
            </button>
          </div>
          <div class="p-1 border-t border-dropdown-divider">
            <button type="button" class="flex items-center gap-x-3 py-2 px-3 w-full rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
              <span class="flex justify-center items-center size-6">
                <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 12h8"/><path d="M12 8v8"/></svg>
              </span>
              Add account
            </button>
          </div>
        </div>
        
      </div>
    </div>
  </div>
</header>

<aside id="hs-pro-sidebar" class="hs-overlay [--auto-close:lg]
  hs-overlay-open:translate-x-0
  -translate-x-full transition-all duration-300 transform
  w-65
  hidden
  fixed inset-y-0 inset-s-0 z-60
  bg-sidebar-inverse
  lg:block lg:translate-x-0 lg:inset-e-auto lg:bottom-0" tabindex="-1" aria-label="Sidebar">
  <div class="flex flex-col h-full max-h-full">
    <div class="px-5 py-3 flex items-center">
      
      <a class="flex-none rounded-md text-xl inline-block font-semibold focus:outline-hidden focus:opacity-80" href="../../../templates/collaboration/canvas-workspace/index.html" aria-label="Preline">
        <svg class="w-28 h-auto" width="116" height="32" viewBox="0 0 116 32" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M33.5696 30.8182V11.3182H37.4474V13.7003H37.6229C37.7952 13.3187 38.0445 12.9309 38.3707 12.5369C38.7031 12.1368 39.134 11.8045 39.6634 11.5398C40.1989 11.2689 40.8636 11.1335 41.6577 11.1335C42.6918 11.1335 43.6458 11.4044 44.5199 11.946C45.3939 12.4815 46.0926 13.291 46.6158 14.3743C47.139 15.4515 47.4006 16.8026 47.4006 18.4276C47.4006 20.0095 47.1451 21.3452 46.6342 22.4347C46.1295 23.518 45.4401 24.3397 44.5661 24.8999C43.6982 25.4538 42.7256 25.7308 41.6484 25.7308C40.8852 25.7308 40.2358 25.6046 39.7003 25.3523C39.1709 25.0999 38.737 24.7829 38.3984 24.4013C38.0599 24.0135 37.8014 23.6226 37.6229 23.2287H37.5028V30.8182H33.5696ZM37.4197 18.4091C37.4197 19.2524 37.5367 19.9879 37.7706 20.6158C38.0045 21.2436 38.343 21.733 38.7862 22.0838C39.2294 22.4285 39.768 22.6009 40.402 22.6009C41.0421 22.6009 41.5838 22.4254 42.027 22.0746C42.4702 21.7176 42.8056 21.2251 43.0334 20.5973C43.2673 19.9633 43.3842 19.2339 43.3842 18.4091C43.3842 17.5904 43.2704 16.8703 43.0426 16.2486C42.8149 15.6269 42.4794 15.1406 42.0362 14.7898C41.593 14.4389 41.0483 14.2635 40.402 14.2635C39.7618 14.2635 39.2202 14.4328 38.777 14.7713C38.34 15.1098 38.0045 15.59 37.7706 16.2116C37.5367 16.8333 37.4197 17.5658 37.4197 18.4091ZM49.2427 25.5V11.3182H53.0559V13.7926H53.2037C53.4622 12.9124 53.8961 12.2476 54.5055 11.7983C55.1149 11.3428 55.8166 11.1151 56.6106 11.1151C56.8076 11.1151 57.02 11.1274 57.2477 11.152C57.4754 11.1766 57.6755 11.2105 57.8478 11.2536V14.7436C57.6632 14.6882 57.4077 14.639 57.0815 14.5959C56.7553 14.5528 56.4567 14.5312 56.1859 14.5312C55.6073 14.5312 55.0903 14.6574 54.6348 14.9098C54.1854 15.156 53.8284 15.5007 53.5638 15.9439C53.3052 16.3871 53.176 16.898 53.176 17.4766V25.5H49.2427ZM64.9043 25.777C63.4455 25.777 62.1898 25.4815 61.1373 24.8906C60.0909 24.2936 59.2845 23.4503 58.7182 22.3608C58.1519 21.2652 57.8688 19.9695 57.8688 18.4737C57.8688 17.0149 58.1519 15.7346 58.7182 14.6328C59.2845 13.531 60.0816 12.6723 61.1096 12.0568C62.1437 11.4413 63.3563 11.1335 64.7474 11.1335C65.683 11.1335 66.5539 11.2843 67.3603 11.5859C68.1728 11.8814 68.8806 12.3277 69.4839 12.9247C70.0932 13.5218 70.5672 14.2727 70.9057 15.1776C71.2443 16.0762 71.4135 17.1288 71.4135 18.3352V19.4155H59.4384V16.978H67.7111C67.7111 16.4117 67.588 15.91 67.3418 15.473C67.0956 15.036 66.754 14.6944 66.317 14.4482C65.8861 14.1958 65.3844 14.0696 64.812 14.0696C64.2149 14.0696 63.6856 14.2081 63.2239 14.4851C62.7684 14.7559 62.4114 15.1222 62.1529 15.5838C61.8944 16.0393 61.762 16.5471 61.7559 17.1072V19.4247C61.7559 20.1264 61.8851 20.7327 62.1437 21.2436C62.4083 21.7545 62.7807 22.1484 63.2608 22.4254C63.741 22.7024 64.3103 22.8409 64.9689 22.8409C65.406 22.8409 65.8061 22.7794 66.1692 22.6562C66.5324 22.5331 66.8432 22.3485 67.1018 22.1023C67.3603 21.8561 67.5572 21.5545 67.6927 21.1974L71.3304 21.4375C71.1458 22.3116 70.7672 23.0748 70.1948 23.7273C69.6285 24.3736 68.896 24.8783 67.9974 25.2415C67.1048 25.5985 66.0738 25.777 64.9043 25.777ZM77.1335 6.59091V25.5H73.2003V6.59091H77.1335ZM79.5043 25.5V11.3182H83.4375V25.5H79.5043ZM81.4801 9.49006C80.8954 9.49006 80.3937 9.29616 79.9752 8.90838C79.5628 8.51444 79.3566 8.04356 79.3566 7.49574C79.3566 6.95407 79.5628 6.48935 79.9752 6.10156C80.3937 5.70762 80.8954 5.51065 81.4801 5.51065C82.0649 5.51065 82.5635 5.70762 82.9759 6.10156C83.3944 6.48935 83.6037 6.95407 83.6037 7.49574C83.6037 8.04356 83.3944 8.51444 82.9759 8.90838C82.5635 9.29616 82.0649 9.49006 81.4801 9.49006ZM89.7415 17.3011V25.5H85.8083V11.3182H89.5569V13.8203H89.723C90.037 12.9955 90.5632 12.343 91.3019 11.8629C92.0405 11.3767 92.9361 11.1335 93.9887 11.1335C94.9735 11.1335 95.8322 11.349 96.5647 11.7798C97.2971 12.2107 97.8665 12.8262 98.2728 13.6264C98.679 14.4205 98.8821 15.3684 98.8821 16.4702V25.5H94.9489V17.1719C94.9551 16.304 94.7335 15.6269 94.2841 15.1406C93.8348 14.6482 93.2162 14.402 92.4283 14.402C91.8989 14.402 91.4311 14.5159 91.0249 14.7436C90.6248 14.9714 90.3109 15.3037 90.0831 15.7408C89.8615 16.1716 89.7477 16.6918 89.7415 17.3011ZM107.665 25.777C106.206 25.777 104.951 25.4815 103.898 24.8906C102.852 24.2936 102.045 23.4503 101.479 22.3608C100.913 21.2652 100.63 19.9695 100.63 18.4737C100.63 17.0149 100.913 15.7346 101.479 14.6328C102.045 13.531 102.842 12.6723 103.87 12.0568C104.905 11.4413 106.117 11.1335 107.508 11.1335C108.444 11.1335 109.315 11.2843 110.121 11.5859C110.934 11.8814 111.641 12.3277 112.245 12.9247C112.854 13.5218 113.328 14.2727 113.667 15.1776C114.005 16.0762 114.174 17.1288 114.174 18.3352V19.4155H102.199V16.978H110.472C110.472 16.4117 110.349 15.91 110.103 15.473C109.856 15.036 109.515 14.6944 109.078 14.4482C108.647 14.1958 108.145 14.0696 107.573 14.0696C106.976 14.0696 106.446 14.2081 105.985 14.4851C105.529 14.7559 105.172 15.1222 104.914 15.5838C104.655 16.0393 104.523 16.5471 104.517 17.1072V19.4247C104.517 20.1264 104.646 20.7327 104.905 21.2436C105.169 21.7545 105.542 22.1484 106.022 22.4254C106.502 22.7024 107.071 22.8409 107.73 22.8409C108.167 22.8409 108.567 22.7794 108.93 22.6562C109.293 22.5331 109.604 22.3485 109.863 22.1023C110.121 21.8561 110.318 21.5545 110.454 21.1974L114.091 21.4375C113.907 22.3116 113.528 23.0748 112.956 23.7273C112.389 24.3736 111.657 24.8783 110.758 25.2415C109.866 25.5985 108.835 25.777 107.665 25.777Z" class="fill-foreground-inverse" fill="currentColor"/>
          <path d="M1 29.5V16.5C1 9.87258 6.37258 4.5 13 4.5C19.6274 4.5 25 9.87258 25 16.5C25 23.1274 19.6274 28.5 13 28.5H12" class="stroke-line-inverse" stroke="currentColor" stroke-width="2"/>
          <path d="M5 29.5V16.66C5 12.1534 8.58172 8.5 13 8.5C17.4183 8.5 21 12.1534 21 16.66C21 21.1666 17.4183 24.82 13 24.82H12" class="stroke-line-inverse" stroke="currentColor" stroke-width="2"/>
          <circle cx="13" cy="16.5214" r="5" class="fill-foreground-inverse" fill="currentColor"/>
        </svg>
      </a>

<div class="lg:hidden ms-auto">
        <button type="button" class="w-6 h-7 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-md bg-secondary border border-secondary-line text-muted-foreground hover:bg-secondary-hover focus:outline-hidden focus:bg-secondary-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-overlay="#hs-pro-sidebar">
          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="7 8 3 12 7 16"/><line x1="21" x2="11" y1="12" y2="12"/><line x1="21" x2="11" y1="6" y2="6"/><line x1="21" x2="11" y1="18" y2="18"/></svg>
        </button>
      </div>
      
    </div>

<div class="h-[calc(100%-109px)] overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track-inverse [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb-inverse">
      
      <nav class="w-full flex flex-col flex-wrap pb-3" data-hs-accordion-always-open>
        <div class="pt-3 border-t border-line-inverse/10">
          
          <div class="px-2 mb-1">
            <a class="flex gap-x-3 py-2 px-3 text-sm border border-transparent text-foreground-inverse rounded-lg hover:bg-sidebar-nav-hover/10 focus:outline-hidden  focus:bg-sidebar-nav-focus/10" href="../../../templates/collaboration/canvas-workspace/index.html">
              <svg class="shrink-0 mt-0.5 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16.5 12"/></svg>
              Home
            </a>
          </div>

<div class="px-2 mb-1">
            <a class="flex gap-x-3 py-2 px-3 text-sm border border-transparent text-foreground-inverse rounded-lg hover:bg-sidebar-nav-hover/10 focus:outline-hidden  focus:bg-sidebar-nav-focus/10" href="../../../templates/collaboration/canvas-workspace/blank-new-canvas.html">
              <svg class="shrink-0 mt-0.5 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="m12.99 6.74 1.93 3.44"/><path d="M19.136 12a10 10 0 0 1-14.271 0"/><path d="m21 21-2.16-3.84"/><path d="m3 21 8.02-14.26"/><circle cx="12" cy="5" r="2"/></svg>
              Blank (New Canvas)
            </a>
          </div>

<div class="px-2 mb-1">
            <a class="flex gap-x-3 py-2 px-3 text-sm border border-transparent text-foreground-inverse rounded-lg hover:bg-sidebar-nav-hover/10 focus:outline-hidden  focus:bg-sidebar-nav-focus/10" href="../../../templates/collaboration/canvas-workspace/canvas-with-contents.html">
              <svg class="shrink-0 mt-0.5 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="M2 3h20"/><path d="M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3"/><path d="m7 21 5-5 5 5"/></svg>
              Canvas (with Contents)
            </a>
          </div>

<div class="px-2 mb-1">
            <a class="flex gap-x-3 py-2 px-3 text-sm border border-transparent text-foreground-inverse rounded-lg hover:bg-sidebar-nav-hover/10 focus:outline-hidden  focus:bg-sidebar-nav-focus/10" href="../../../templates/collaboration/canvas-workspace/empty-states.html">
              <svg class="shrink-0 mt-0.5 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="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg>
              Empty Contents
            </a>
          </div>

<div class="hs-accordion-group pt-2 px-3 mt-3 space-y-1 border-t border-line-inverse/10 first:border-transparent first:pt-0" id="preline-accordion" data-hs-accordion-always-open>
            <span class="block py-2 px-3 mb-1.5 text-sm font-semibold text-foreground-inverse">
              Teams
            </span>

<div class="hs-accordion active" id="hs-pro-files-accordion-preline">
              <button type="button" class="hs-accordion-toggle w-full text-start flex items-center gap-x-1 py-2 px-3 text-sm border border-transparent text-foreground-inverse rounded-lg hover:bg-sidebar-nav-hover/10 focus:outline-hidden focus:bg-sidebar-nav-focus/10" aria-expanded="true" aria-controls="hs-pro-files-accordion-preline-sub">
                <span class="me-2 flex justify-center items-center size-3.5">
                  <span class="size-2.5 inline-block bg-yellow-500 rounded-full"></span>
                </span>
                Preline
                <svg class="hs-accordion-active:-rotate-180 shrink-0 mt-1 size-3.5 ms-auto transition" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
              </button>

<div id="hs-pro-files-accordion-preline-sub" class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300" role="region" aria-labelledby="hs-pro-files-accordion-preline">
                <ul class="ps-7 my-1 space-y-1.5 relative before:absolute before:top-0 before:inset-s-[19px] before:h-full before:border-s before:border-line-inverse/20" data-hs-accordion-always-open>
                  <li>
                    <a class="flex items-center gap-x-1 py-2 px-3 text-sm border border-transparent text-foreground-inverse rounded-lg hover:bg-sidebar-nav-hover/10 focus:outline-hidden focus:bg-sidebar-nav-focus/10" href="#">
                      Analytics
                      <span class="ms-auto py-px px-1.5 font-medium text-[10px] leading-4 bg-plain/30 text-foreground-inverse rounded-md">
                        20
                      </span>
                    </a>
                  </li>
                  <li>
                    <a class="flex items-center gap-x-1 py-2 px-3 text-sm border border-transparent text-foreground-inverse rounded-lg hover:bg-sidebar-nav-hover/10 focus:outline-hidden focus:bg-sidebar-nav-focus/10" href="#">
                      User Profile
                      <span class="ms-auto py-px px-1.5 font-medium text-[10px] leading-4 bg-plain/30 text-foreground-inverse rounded-md">
                        12
                      </span>
                    </a>
                  </li>
                  <li>
                    <a class="flex items-center gap-x-1 py-2 px-3 text-sm border border-transparent text-foreground-inverse rounded-lg hover:bg-sidebar-nav-hover/10 focus:outline-hidden focus:bg-sidebar-nav-focus/10" href="#">
                      Payment
                    </a>
                  </li>
                  <li>
                    <a class="flex items-center gap-x-1 py-2 px-3 text-sm border border-transparent text-foreground-inverse rounded-lg hover:bg-sidebar-nav-hover/10 focus:outline-hidden focus:bg-sidebar-nav-focus/10" href="#">
                      Examples
                      <span class="ms-auto py-px px-1.5 font-medium text-[10px] leading-4 bg-plain/30 text-foreground-inverse rounded-md">
                        4
                      </span>
                    </a>
                  </li>
                  <li>
                    <a class="flex items-center gap-x-1 py-2 px-3 text-sm border border-transparent text-foreground-inverse rounded-lg hover:bg-sidebar-nav-hover/10 focus:outline-hidden focus:bg-sidebar-nav-focus/10" href="#">
                      Plan & Billing
                    </a>
                  </li>
                  <li>
                    <a class="flex items-center gap-x-1 py-2 px-3 text-sm border border-transparent text-foreground-inverse rounded-lg hover:bg-sidebar-nav-hover/10 focus:outline-hidden focus:bg-sidebar-nav-focus/10" href="#">
                      Users
                      <span class="ms-auto py-px px-1.5 font-medium text-[10px] leading-4 bg-plain/30 text-foreground-inverse rounded-md">
                        99+
                      </span>
                    </a>
                  </li>
                </ul>
              </div>
              
            </div>

<div class="hs-accordion active" id="hs-pro-files-accordion-htmlstream">
              <button type="button" class="hs-accordion-toggle w-full text-start flex items-center gap-x-1 py-2 px-3 text-sm border border-transparent text-foreground-inverse rounded-lg hover:bg-sidebar-nav-hover/10 focus:outline-hidden focus:bg-sidebar-nav-focus/10" aria-expanded="true" aria-controls="hs-pro-files-accordion-htmlstream-sub">
                <span class="me-2 flex justify-center items-center size-3.5">
                  <span class="size-2.5 inline-block bg-teal-500 rounded-full"></span>
                </span>
                Htmlstream
                <svg class="hs-accordion-active:-rotate-180 shrink-0 mt-1 size-3.5 ms-auto transition" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
              </button>

<div id="hs-pro-files-accordion-htmlstream-sub" class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300" role="region" aria-labelledby="hs-pro-files-accordion-htmlstream">
                <ul class="ps-7 my-1 space-y-1.5 relative before:absolute before:top-0 before:inset-s-[19px] before:h-full before:border-s before:border-line-inverse/20" data-hs-accordion-always-open>
                  <li>
                    <a class="flex items-center gap-x-1 py-2 px-3 text-sm border border-transparent text-foreground-inverse rounded-lg hover:bg-sidebar-nav-hover/10 focus:outline-hidden focus:bg-sidebar-nav-focus/10" href="#">
                      First Project
                    </a>
                  </li>
                </ul>
              </div>
              
            </div>

<div>
              <a class="flex items-center gap-x-1 py-2 px-3 text-sm border border-transparent text-foreground-inverse rounded-lg hover:bg-sidebar-nav-hover/10 focus:outline-hidden focus:bg-sidebar-nav-focus/10" href="#">
                <span class="me-2 flex justify-center items-center size-3.5">
                  <span class="size-2.5 inline-block bg-violet-500 rounded-full"></span>
                </span>
                Pixeel
              </a>
            </div>

<div>
              <button type="button" class="w-full flex items-center gap-x-3 py-2 px-3 text-sm border border-transparent text-foreground-inverse rounded-lg hover:bg-sidebar-nav-hover/10 focus:outline-hidden focus:bg-sidebar-nav-focus/10">
                <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="M5 12h14"/><path d="M12 5v14"/></svg>
                Create new team
              </button>
            </div>
            
          </div>
          
        </div>
      </nav>

<footer class="absolute bottom-0 inset-x-0 bg-sidebar-inverse border-t border-line-inverse/10">
        <div class="flex justify-center items-center gap-x-2 py-2 px-5">
          
          <div class="hs-dropdown relative inline-flex">
            
            <button id="hs-pro-dsstd" type="button" class="inline-flex shrink-0 justify-center items-center gap-x-2 size-9.5 rounded-full text-foreground-inverse hover:bg-plain/10 disabled:opacity-50 focus:outline-hidden focus:bg-plain/10" 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="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>
            </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-60 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-dsstd">
              <div class="p-1 space-y-0.5">
                <button type="button" class="hs-auto-mode-active:bg-muted-active w-full flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" data-hs-theme-click-value="auto">
                  Auto (system default)
                </button>
                <button type="button" class="hs-default-mode-active:bg-muted-active w-full flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" data-hs-theme-click-value="default">
                  Default (light mode)
                </button>
                <button type="button" class="hs-dark-mode-active:bg-muted-active w-full flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" data-hs-theme-click-value="dark">
                  Dark
                </button>
              </div>
            </div>
            
          </div>

<div class="relative">
            <select data-hs-select='{
                "placeholder": "Select country",
                "toggleTag": "<button type=\"button\" aria-expanded=\"false\"><div data-icon></div></button>",
                
                "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 px-3 flex items-center gap-x-2 text-nowrap w-full cursor-pointer border border-line-inverse/20 rounded-full text-start text-sm text-foreground-inverse hover:bg-plain/10 focus:outline-hidden focus:bg-plain/10",
                "dropdownClasses": "w-full min-w-45 max-h-72 p-1 space-y-0.5 z-50 w-full 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-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 gap-x-2\"><div data-icon></div><div class=\"text-foreground\" data-title></div><span class=\"hidden hs-selected:block ms-auto\"><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></div>"
              }' class="hidden">
              <option value="">Choose</option>
              <option value="English-us" selected data-hs-select-option='{
                "icon": "<svg class=\"shrink-0 size-4 rounded-full\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><g fill-rule=\"evenodd\"><g stroke-width=\"1pt\"><path fill=\"#bd3d44\" d=\"M0 0h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z\" transform=\"scale(3.9385)\"/><path fill=\"#fff\" d=\"M0 10h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z\" transform=\"scale(3.9385)\"/></g><path fill=\"#192f5d\" d=\"M0 0h98.8v70H0z\" transform=\"scale(3.9385)\"/><path fill=\"#fff\" d=\"M8.2 3l1 2.8H12L9.7 7.5l.9 2.7-2.4-1.7L6 10.2l.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7L74 8.5l-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 7.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 24.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 21.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 38.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 35.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 52.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 49.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 66.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 63.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9z\" transform=\"scale(3.9385)\"/></g></svg>"}'>
                English
              </option>
              <option value="Deutsch" data-hs-select-option='{
                "icon": "<svg class=\"shrink-0 size-4 rounded-full\" xmlns=\"http://www.w3.org/2000/svg\" id=\"flag-icon-css-de\" viewBox=\"0 0 512 512\"><path fill=\"#ffce00\" d=\"M0 341.3h512V512H0z\"/><path d=\"M0 0h512v170.7H0z\"/><path fill=\"#d00\" d=\"M0 170.7h512v170.6H0z\"/></svg>"}'>
                Deutsch
              </option>
              <option value="Dansk" data-hs-select-option='{
                "icon": "<svg class=\"shrink-0 size-4 rounded-full\" xmlns=\"http://www.w3.org/2000/svg\" id=\"flag-icon-css-dk\" viewBox=\"0 0 512 512\"><path fill=\"#c8102e\" d=\"M0 0h512.1v512H0z\"/><path fill=\"#fff\" d=\"M144 0h73.1v512H144z\"/><path fill=\"#fff\" d=\"M0 219.4h512.1v73.2H0z\"/></svg>"}'>
                Dansk
              </option>
              <option value="Italiano" data-hs-select-option='{
                "icon": "<svg class=\"shrink-0 size-4 rounded-full\" xmlns=\"http://www.w3.org/2000/svg\" id=\"flag-icon-css-it\" viewBox=\"0 0 512 512\"><g fill-rule=\"evenodd\" stroke-width=\"1pt\"><path fill=\"#fff\" d=\"M0 0h512v512H0z\"/><path fill=\"#009246\" d=\"M0 0h170.7v512H0z\"/><path fill=\"#ce2b37\" d=\"M341.3 0H512v512H341.3z\"/></g></svg>"}'>
                Italiano
              </option>
              <option value="中文-繁體" data-hs-select-option='{
                "icon": "<svg class=\"shrink-0 size-4 rounded-full\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" id=\"flag-icon-css-cn\" viewBox=\"0 0 512 512\"><defs><path id=\"a\" fill=\"#ffde00\" d=\"M1-.3L-.7.8 0-1 .6.8-1-.3z\"/></defs><path fill=\"#de2910\" d=\"M0 0h512v512H0z\"/><use width=\"30\" height=\"20\" transform=\"matrix(76.8 0 0 76.8 128 128)\" xlink:href=\"#a\"/><use width=\"30\" height=\"20\" transform=\"rotate(-121 142.6 -47) scale(25.5827)\" xlink:href=\"#a\"/><use width=\"30\" height=\"20\" transform=\"rotate(-98.1 198 -82) scale(25.6)\" xlink:href=\"#a\"/><use width=\"30\" height=\"20\" transform=\"rotate(-74 272.4 -114) scale(25.6137)\" xlink:href=\"#a\"/><use width=\"30\" height=\"20\" transform=\"matrix(16 -19.968 19.968 16 256 230.4)\" xlink:href=\"#a\"/></svg>"}'>
                中文 (繁體)
              </option>
            </select>
          </div>

<div class="hs-dropdown [--placement:bottom-right] relative inline-flex">
            
              <button id="hs-pro-dnhd" type="button" class="  inline-flex shrink-0 justify-center items-center gap-x-2 size-9.5 rounded-full text-foreground-inverse hover:bg-plain/10 disabled:opacity-50 focus:outline-hidden focus:bg-plain/10" 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="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></svg>
              </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-60 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-dnhd">
              <div class="p-1">
                <a class="flex gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                  <svg class="shrink-0 mt-0.5 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="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></svg>
                  Help Centre
                </a>
                <a class="flex gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                  <svg class="shrink-0 mt-0.5 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>
                  Community
                </a>
                <a class="flex gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                  <svg class="shrink-0 mt-0.5 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="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
                  What’s New
                </a>

<a class="flex gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                  <svg class="shrink-0 mt-0.5 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="M12 16v-4"/><path d="M12 8h.01"/></svg>
                  Privacy and Legal
                </a>
                <a class="flex gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                  <svg class="shrink-0 mt-0.5 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="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
                  Documentation
                </a>
                <a class="flex gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                  <svg class="shrink-0 mt-0.5 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"><rect width="20" height="14" x="2" y="7" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>
                  Hire an Expert
                  <div class="ms-auto">
                    <span class="inline-flex items-center gap-1.5 py-px px-1.5 rounded-sm text-[10px] leading-4 font-medium bg-surface text-surface-foreground">
                      New
                    </span>
                  </div>
                </a>
              </div>
            </div>
            
          </div>
          
        </div>
      </footer>
      
    </div>
    
  </div>
</aside>

<main id="content" class="lg:ps-65">
  <div class="px-4 sm:py-7 sm:px-7 space-y-4">
    
    <div class="p-4 flex flex-col justify-center h-72 md:h-96 min-h-[calc(100vh-115px)] sm:min-h-[calc(100vh-114px)]  bg-layer border border-layer-line shadow-2xs rounded-xl">
      <div class="relative h-full border border-dashed border-black/10 dark:border-white/10 rounded-xl overflow-hidden">
        <div class="absolute inset-0 size-full">
          <div class="bg-[linear-gradient(45deg,rgba(0,0,0,0.1)_7.14%,transparent_7.14%,transparent_50%,rgba(0,0,0,0.1)_50%,rgba(0,0,0,0.1)_57.14%,transparent_57.14%,transparent)] dark:bg-[linear-gradient(45deg,rgba(255,255,255,0.1)_7.14%,transparent_7.14%,transparent_50%,rgba(255,255,255,0.1)_50%,rgba(255,255,255,0.1)_57.14%,transparent_57.14%,transparent)] bg-size-[10px_10px] size-full"></div>
        </div>
      </div>
    </div>
    
  </div>
</main>

Open related canvas workspace template