Open demo

CSS code

HTML 
<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <symbol id="i-updown" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m8 9 4-4 4 4M8 15l4 4 4-4"/></symbol>
  <symbol id="i-tasks" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="3.5" width="17" height="17" rx="3.5"/><path d="m8 12 3 3 5-6"/></symbol>
  <symbol id="i-plus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></symbol>
  <symbol id="i-search" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="6.5"/><path d="m20 20-4.2-4.2"/></symbol>
  <symbol id="i-home" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 10.5 12 4l8.5 6.5V19.5a1 1 0 0 1-1 1h-5v-6h-5v6h-5a1 1 0 0 1-1-1z"/></symbol>
  <symbol id="i-folder" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 7a1.5 1.5 0 0 1 1.5-1.5h4.3l2 2.5H19a1.5 1.5 0 0 1 1.5 1.5v8.5A1.5 1.5 0 0 1 19 19.5H5A1.5 1.5 0 0 1 3.5 18z"/></symbol>
  <symbol id="i-chart" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4v16h16"/><path d="M8.5 16v-4M12.5 16V8M16.5 16v-6"/></symbol>
  <symbol id="i-logout" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14 4h4.5A1.5 1.5 0 0 1 20 5.5v13a1.5 1.5 0 0 1-1.5 1.5H14"/><path d="M9.5 16.5 5 12l4.5-4.5M5 12h10"/></symbol>
  <symbol id="i-user" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4.5 20.5c.8-4 3.7-6 7.5-6s6.7 2 7.5 6"/></symbol>
  <symbol id="i-zap" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M13 3 5 13.5h6.5L11 21l8-10.5h-6.5z"/></symbol>
  <symbol id="i-image" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="4.5" width="17" height="15" rx="2.5"/><circle cx="9" cy="10" r="1.8"/><path d="m20.5 16-5-5-9 8.5"/></symbol>
  <symbol id="i-message" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5.5h16v11H9.5L4 20.5z"/></symbol>
  <symbol id="i-star" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m12 4 2.5 5 5.5.8-4 3.9.9 5.5L12 16.6l-4.9 2.6.9-5.5-4-3.9L9.5 9z"/></symbol>
  <symbol id="i-sliders" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h9M17 7h3M4 17h3M11 17h9"/><circle cx="15" cy="7" r="2"/><circle cx="9" cy="17" r="2"/></symbol>
</svg>
<div><span class="lbl">Workspace switcher, search and a usage footer</span>
<div class="app">
  <nav class="ps" aria-label="Acme Studio">
    <details class="ps-ws">
      <summary><span class="ps-ws-logo" style="background:linear-gradient(135deg,#10b981,#047857)" aria-hidden="true">A</span><span><span class="ps-ws-name">Acme Studio</span><span class="ps-ws-meta">Pro plan · 12 members</span></span><svg aria-hidden="true"><use href="#i-updown"/></svg><span class="sr-only">Switch workspace</span></summary>
      <ul class="ps-ws-menu">
        <li><a href="#" aria-current="true"><span class="ps-ws-logo" style="background:linear-gradient(135deg,#10b981,#047857)" aria-hidden="true">A</span>Acme Studio<svg aria-hidden="true"><use href="#i-tasks"/></svg></a></li>
        <li><a href="#"><span class="ps-ws-logo" style="background:linear-gradient(135deg,#f59e0b,#b45309)" aria-hidden="true">F</span>Fieldnotes</a></li>
        <li><a href="#"><span class="ps-ws-logo" style="background:linear-gradient(135deg,#64748b,#334155)" aria-hidden="true">P</span>Personal</a></li>
        <li><a class="ps-ws-new" href="#"><svg aria-hidden="true"><use href="#i-plus"/></svg>Create workspace</a></li>
      </ul>
    </details>
    <form class="ps-search" role="search"><label class="sr-only" for="ps-q">Search Acme Studio</label><svg aria-hidden="true"><use href="#i-search"/></svg><input id="ps-q" type="search" placeholder="Search projects and tasks"></form>
    <ul class="ps-list">
      <li><a class="ps-link" href="#"><svg aria-hidden="true"><use href="#i-home"/></svg><span>Home</span></a></li>
      <li><a class="ps-link" href="#" aria-current="page"><svg aria-hidden="true"><use href="#i-folder"/></svg><span>Projects</span></a></li>
      <li><a class="ps-link" href="#"><svg aria-hidden="true"><use href="#i-tasks"/></svg><span>Tasks</span><span class="ps-count">5<span class="sr-only"> due</span></span></a></li>
      <li><a class="ps-link" href="#"><svg aria-hidden="true"><use href="#i-chart"/></svg><span>Reports</span></a></li>
    </ul>
    <p class="ps-heading">Favourites</p>
    <ul class="ps-list">
      <li><a class="ps-link" href="#"><span class="ps-swatch" style="background:#10b981"></span><span>Brand refresh</span></a></li>
      <li><a class="ps-link" href="#"><span class="ps-swatch" style="background:#6366f1"></span><span>Onboarding flow</span></a></li>
    </ul>
    <div class="ps-foot">
      <div class="ps-usage">
        <p><span>Storage</span><b>7.4 of 10 GB</b></p>
        <div class="ps-bar" role="progressbar" aria-label="Storage used" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100"><span style="width:74%"></span></div>
        <a href="#">Upgrade plan</a>
      </div>
      <div class="ps-user"><span class="ps-avatar" aria-hidden="true">RK</span><div><b>Rosa Kim</b><small>[email protected]</small></div><button class="ps-icon-btn" type="button" aria-label="Log out"><svg aria-hidden="true"><use href="#i-logout"/></svg></button></div>
    </div>
  </nav>
  <div class="pg" style="--pg-bar:#a7f3d0">
    <div class="pg-head"><div><p class="pg-kicker">Acme Studio · Projects</p><h2 class="pg-title">Brand refresh</h2></div><span class="pg-chip">Due 3 November</span></div>
    <div class="pg-tiles"><div class="pg-tile"><span>Open tasks</span><b>18</b></div><div class="pg-tile"><span>Completed</span><b>42</b><em>+7 this week</em></div><div class="pg-tile"><span>Team</span><b>6 people</b></div></div>
    <div class="pg-chart" aria-hidden="true"><i style="height:42%"></i><i style="height:55%"></i><i style="height:50%"></i><i style="height:68%"></i><i style="height:60%"></i><i style="height:74%"></i><i style="height:66%"></i><i style="height:80%"></i><i style="height:58%"></i><i style="height:72%"></i><i style="height:64%"></i><i style="height:86%"></i></div>
  </div>
</div></div>
<div><span class="lbl">Profile header with stats and footer actions</span>
<div class="app">
  <nav class="ps ps-profile" aria-label="Folio">
    <div class="ps-cover" aria-hidden="true"></div>
    <div class="ps-me">
      <span class="ps-avatar" aria-hidden="true">DO</span>
      <h2>Daniel Osei</h2>
      <p>Senior product designer, Accra</p>
      <span class="ps-status">Available for work</span>
    </div>
    <dl class="ps-stats"><div><dt>Projects</dt><dd>24</dd></div><div><dt>Followers</dt><dd>1.2k</dd></div><div><dt>Following</dt><dd>318</dd></div></dl>
    <form class="ps-search" role="search"><label class="sr-only" for="pf-q">Search Folio</label><svg aria-hidden="true"><use href="#i-search"/></svg><input id="pf-q" type="search" placeholder="Search work and people"></form>
    <ul class="ps-list">
      <li><a class="ps-link" href="#" aria-current="page"><svg aria-hidden="true"><use href="#i-user"/></svg><span>Profile</span></a></li>
      <li><a class="ps-link" href="#"><svg aria-hidden="true"><use href="#i-zap"/></svg><span>Activity</span></a></li>
      <li><a class="ps-link" href="#"><svg aria-hidden="true"><use href="#i-image"/></svg><span>Portfolio</span></a></li>
      <li><a class="ps-link" href="#"><svg aria-hidden="true"><use href="#i-message"/></svg><span>Messages</span><span class="ps-count">3<span class="sr-only"> unread</span></span></a></li>
      <li><a class="ps-link" href="#"><svg aria-hidden="true"><use href="#i-star"/></svg><span>Saved</span></a></li>
    </ul>
    <div class="ps-actions"><a class="ps-btn" href="#"><svg aria-hidden="true"><use href="#i-sliders"/></svg>Settings</a><button class="ps-btn ps-btn-quiet" type="button"><svg aria-hidden="true"><use href="#i-logout"/></svg>Sign out</button></div>
  </nav>
  <div class="pg" style="--pg-bar:#fecdd3">
    <div class="pg-head"><div><p class="pg-kicker">Folio · Your profile</p><h2 class="pg-title">Daniel Osei</h2></div><span class="pg-chip">Open to freelance work</span></div>
    <div class="pg-tiles"><div class="pg-tile"><span>Profile views</span><b>2,418</b><em>+18%</em></div><div class="pg-tile"><span>Saves</span><b>312</b></div><div class="pg-tile"><span>Hire requests</span><b>5</b></div></div>
    <div class="pg-chart" aria-hidden="true"><i style="height:34%"></i><i style="height:48%"></i><i style="height:42%"></i><i style="height:60%"></i><i style="height:54%"></i><i style="height:70%"></i><i style="height:62%"></i><i style="height:58%"></i><i style="height:76%"></i><i style="height:68%"></i><i style="height:82%"></i><i style="height:74%"></i></div>
  </div>
</div></div>
CSS 
/* App shell */
.app{display:flex;height:600px;background:#fff;border:1px solid #d6dce5;border-radius:16px;overflow:hidden;
  box-shadow:0 1px 2px rgba(15,23,42,.05),0 18px 40px -22px rgba(15,23,42,.28)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Shared link list */
.ps{--ps-accent:#047857;--ps-active-bg:#e8f7f0;--ps-active-ink:#065f46;--ps-ink:#475569;--ps-strong:#0f172a;--ps-muted:#5b6474;
  --ps-line:#e5e9f0;--ps-hover:#f1f5f9;
  flex:0 0 264px;display:flex;flex-direction:column;padding:14px;background:#fff;border-right:1px solid var(--ps-line);
  overflow-y:auto;font-size:.875rem}
.ps-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.ps-link{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:8px;color:var(--ps-ink);font-weight:500;
  text-decoration:none;transition:background-color .15s,color .15s}
.ps-link svg{width:18px;height:18px;flex:none}
.ps-link:hover{background:var(--ps-hover);color:var(--ps-strong)}
.ps-link[aria-current="page"]{background:var(--ps-active-bg);color:var(--ps-active-ink);font-weight:600}
.ps-count{margin-left:auto;padding:0 7px;border-radius:999px;background:#e9edf3;color:#334155;font-size:.7rem;font-weight:700;line-height:1.6}
.ps-heading{margin:14px 0 4px;padding:0 10px;font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ps-muted)}
.ps-swatch{width:10px;height:10px;margin:0 4px;border-radius:3px;flex:none}
.ps :is(a,button,summary,input):focus-visible{outline:2px solid var(--ps-accent);outline-offset:2px}

/* Workspace switcher: a <details> dropdown */
.ps-ws{position:relative;margin-bottom:12px}
.ps-ws summary{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--ps-line);border-radius:12px;list-style:none;cursor:pointer;
  transition:border-color .15s}
.ps-ws summary::-webkit-details-marker{display:none}
.ps-ws summary:hover{border-color:#c6cdd8}
.ps-ws-logo{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:9px;color:#fff;font-weight:800;font-size:.85rem}
.ps-ws-name{display:block;font-weight:700;color:var(--ps-strong);line-height:1.3}
.ps-ws-meta{display:block;font-size:.72rem;color:var(--ps-muted)}
.ps-ws summary>svg{width:16px;height:16px;margin-left:auto;color:var(--ps-muted)}
.ps-ws-menu{position:absolute;z-index:5;top:calc(100% + 6px);left:0;right:0;list-style:none;margin:0;padding:6px;background:#fff;
  border:1px solid var(--ps-line);border-radius:12px;box-shadow:0 16px 32px -12px rgba(15,23,42,.3)}
.ps-ws-menu a{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:8px;color:var(--ps-ink);text-decoration:none}
.ps-ws-menu a:hover{background:var(--ps-hover)}
.ps-ws-menu .ps-ws-logo{width:26px;height:26px;border-radius:7px;font-size:.72rem}
.ps-ws-menu svg{width:16px;height:16px;margin-left:auto;color:var(--ps-accent)}
.ps-ws-menu .ps-ws-new{border-top:1px solid var(--ps-line);border-radius:0 0 8px 8px;margin-top:4px;padding-top:9px;color:var(--ps-muted)}
.ps-ws-menu .ps-ws-new svg{margin:0 5px;color:inherit}

/* Search */
.ps-search{position:relative;margin:0 0 12px}
.ps-search svg{position:absolute;left:11px;top:50%;width:16px;height:16px;margin-top:-8px;color:var(--ps-muted);pointer-events:none}
.ps-search input{width:100%;padding:8px 10px 8px 34px;border:1px solid #cdd4de;border-radius:9px;background:#f8fafc;color:var(--ps-strong);font:inherit}
.ps-search input::placeholder{color:#6b7482}
.ps-search input:focus{background:#fff;border-color:var(--ps-accent)}

/* Footer: usage meter and the signed-in user */
.ps-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:12px}
.ps-usage{padding:12px;border-radius:12px;background:#f3f6f9}
.ps-usage p{display:flex;justify-content:space-between;margin:0 0 8px;font-size:.78rem;color:var(--ps-ink)}
.ps-usage b{color:var(--ps-strong)}
.ps-bar{height:6px;border-radius:999px;background:#dde3ea;overflow:hidden}
.ps-bar span{display:block;height:100%;border-radius:inherit;background:var(--ps-accent)}
.ps-usage a{display:inline-block;margin-top:9px;border-radius:4px;color:var(--ps-accent);font-size:.78rem;font-weight:700;text-decoration:none}
.ps-usage a:hover{text-decoration:underline}
.ps-user{display:flex;align-items:center;gap:10px;padding:8px 4px 0 6px;border-top:1px solid var(--ps-line)}
.ps-avatar{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fde68a;color:#78350f;font-size:.75rem;font-weight:800}
.ps-user b{display:block;color:var(--ps-strong);line-height:1.3}
.ps-user small{display:block;font-size:.72rem;color:var(--ps-muted)}
.ps-icon-btn{flex:none;display:grid;place-items:center;width:34px;height:34px;margin-left:auto;padding:0;border:0;border-radius:8px;background:none;
  color:var(--ps-muted);cursor:pointer;transition:background-color .15s,color .15s}
.ps-icon-btn:hover{background:var(--ps-hover);color:var(--ps-strong)}
.ps-icon-btn svg{width:18px;height:18px}

/* Profile header variant */
.ps-profile{--ps-accent:#be123c;--ps-active-bg:#fff0f3;--ps-active-ink:#9f1239;padding:0 14px 14px}
.ps-cover{flex:none;height:72px;margin:0 -14px;background:linear-gradient(120deg,#fb7185,#f472b6 45%,#a78bfa)}
.ps-me{margin-top:-30px;padding:0 6px}
.ps-me .ps-avatar{width:60px;height:60px;border:3px solid #fff;background:#1f2937;color:#fff;font-size:1rem}
.ps-me h2{margin:10px 0 0;font-size:1.05rem;color:var(--ps-strong)}
.ps-me p{margin:0;color:var(--ps-muted);font-size:.8rem}
.ps-status{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:2px 9px;border-radius:999px;background:#ecfdf3;color:#067647;font-size:.72rem;font-weight:700}
.ps-status::before{content:"";width:7px;height:7px;border-radius:50%;background:#12b76a}
.ps-stats{display:grid;grid-template-columns:repeat(3,1fr);margin:14px 0;padding:10px 0;border-block:1px solid var(--ps-line);text-align:center}
.ps-stats div{display:flex;flex-direction:column-reverse}
.ps-stats dt{font-size:.72rem;font-weight:400;color:var(--ps-muted)}
.ps-stats dd{margin:0;color:var(--ps-strong);font-size:1rem;font-weight:700}
.ps-actions{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:12px}
.ps-btn{display:flex;align-items:center;justify-content:center;gap:7px;padding:8px 10px;border:1px solid #cdd4de;border-radius:9px;background:#fff;
  color:var(--ps-strong);font:inherit;font-weight:600;text-decoration:none;cursor:pointer;transition:background-color .15s,border-color .15s}
.ps-btn:hover{background:var(--ps-hover)}
.ps-btn svg{width:16px;height:16px}
.ps-btn-quiet{border-color:transparent;color:#b42318}
.ps-btn-quiet:hover{background:#fef3f2}

@media (max-width:640px){
  .app{flex-direction:column;height:auto}
  .ps{flex-basis:auto;border-right:0;border-bottom:1px solid var(--ps-line)}
}
@media (prefers-reduced-motion:reduce){.ps-link,.ps-ws summary,.ps-icon-btn,.ps-btn{transition:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS, Bootstrap 5.3.8 JS bundle

HTML 
<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <symbol id="i-updown" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m8 9 4-4 4 4M8 15l4 4 4-4"/></symbol>
  <symbol id="i-tasks" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="3.5" width="17" height="17" rx="3.5"/><path d="m8 12 3 3 5-6"/></symbol>
  <symbol id="i-plus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></symbol>
  <symbol id="i-search" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="6.5"/><path d="m20 20-4.2-4.2"/></symbol>
  <symbol id="i-home" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 10.5 12 4l8.5 6.5V19.5a1 1 0 0 1-1 1h-5v-6h-5v6h-5a1 1 0 0 1-1-1z"/></symbol>
  <symbol id="i-folder" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 7a1.5 1.5 0 0 1 1.5-1.5h4.3l2 2.5H19a1.5 1.5 0 0 1 1.5 1.5v8.5A1.5 1.5 0 0 1 19 19.5H5A1.5 1.5 0 0 1 3.5 18z"/></symbol>
  <symbol id="i-chart" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4v16h16"/><path d="M8.5 16v-4M12.5 16V8M16.5 16v-6"/></symbol>
  <symbol id="i-logout" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14 4h4.5A1.5 1.5 0 0 1 20 5.5v13a1.5 1.5 0 0 1-1.5 1.5H14"/><path d="M9.5 16.5 5 12l4.5-4.5M5 12h10"/></symbol>
  <symbol id="i-user" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4.5 20.5c.8-4 3.7-6 7.5-6s6.7 2 7.5 6"/></symbol>
  <symbol id="i-zap" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M13 3 5 13.5h6.5L11 21l8-10.5h-6.5z"/></symbol>
  <symbol id="i-image" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="4.5" width="17" height="15" rx="2.5"/><circle cx="9" cy="10" r="1.8"/><path d="m20.5 16-5-5-9 8.5"/></symbol>
  <symbol id="i-message" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5.5h16v11H9.5L4 20.5z"/></symbol>
  <symbol id="i-star" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m12 4 2.5 5 5.5.8-4 3.9.9 5.5L12 16.6l-4.9 2.6.9-5.5-4-3.9L9.5 9z"/></symbol>
  <symbol id="i-sliders" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h9M17 7h3M4 17h3M11 17h9"/><circle cx="15" cy="7" r="2"/><circle cx="9" cy="17" r="2"/></symbol>
</svg>
<div><span class="lbl">Workspace switcher, search and a usage footer</span>
<div class="app d-flex">
  <nav class="ps d-flex flex-column" aria-label="Acme Studio">
    <div class="dropdown ps-ws">
      <button class="btn ps-ws-toggle dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-offset="0,6" aria-expanded="false"><span class="ps-ws-logo" style="background:linear-gradient(135deg,#10b981,#047857)" aria-hidden="true">A</span><span><span class="ps-ws-name">Acme Studio</span><span class="ps-ws-meta">Pro plan · 12 members</span></span><svg aria-hidden="true"><use href="#i-updown"/></svg><span class="visually-hidden">Switch workspace</span></button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#" aria-current="true"><span class="ps-ws-logo" style="background:linear-gradient(135deg,#10b981,#047857)" aria-hidden="true">A</span>Acme Studio<svg aria-hidden="true"><use href="#i-tasks"/></svg></a></li>
        <li><a class="dropdown-item" href="#"><span class="ps-ws-logo" style="background:linear-gradient(135deg,#f59e0b,#b45309)" aria-hidden="true">F</span>Fieldnotes</a></li>
        <li><a class="dropdown-item" href="#"><span class="ps-ws-logo" style="background:linear-gradient(135deg,#64748b,#334155)" aria-hidden="true">P</span>Personal</a></li>
        <li><a class="dropdown-item ps-ws-new" href="#"><svg aria-hidden="true"><use href="#i-plus"/></svg>Create workspace</a></li>
      </ul>
    </div>
    <form class="ps-search position-relative" role="search"><label class="visually-hidden" for="ps-q">Search Acme Studio</label><svg class="position-absolute" aria-hidden="true"><use href="#i-search"/></svg><input class="form-control" id="ps-q" type="search" placeholder="Search projects and tasks"></form>
    <ul class="nav nav-pills flex-column">
      <li class="nav-item"><a class="nav-link" href="#"><svg aria-hidden="true"><use href="#i-home"/></svg><span>Home</span></a></li>
      <li class="nav-item"><a class="nav-link active" href="#" aria-current="page"><svg aria-hidden="true"><use href="#i-folder"/></svg><span>Projects</span></a></li>
      <li class="nav-item"><a class="nav-link" href="#"><svg aria-hidden="true"><use href="#i-tasks"/></svg><span>Tasks</span><span class="badge rounded-pill">5<span class="visually-hidden"> due</span></span></a></li>
      <li class="nav-item"><a class="nav-link" href="#"><svg aria-hidden="true"><use href="#i-chart"/></svg><span>Reports</span></a></li>
    </ul>
    <p class="ps-heading">Favourites</p>
    <ul class="nav nav-pills flex-column">
      <li class="nav-item"><a class="nav-link" href="#"><span class="ps-swatch" style="background:#10b981"></span><span>Brand refresh</span></a></li>
      <li class="nav-item"><a class="nav-link" href="#"><span class="ps-swatch" style="background:#6366f1"></span><span>Onboarding flow</span></a></li>
    </ul>
    <div class="ps-foot d-flex flex-column mt-auto">
      <div class="ps-usage">
        <p class="d-flex justify-content-between"><span>Storage</span><b>7.4 of 10 GB</b></p>
        <div class="progress" role="progressbar" aria-label="Storage used" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100"><div class="progress-bar" style="width:74%"></div></div>
        <a href="#">Upgrade plan</a>
      </div>
      <div class="ps-user d-flex align-items-center"><span class="ps-avatar" aria-hidden="true">RK</span><div><b>Rosa Kim</b><small>[email protected]</small></div><button class="btn ps-icon-btn ms-auto" type="button" aria-label="Log out"><svg aria-hidden="true"><use href="#i-logout"/></svg></button></div>
    </div>
  </nav>
  <div class="pg" style="--pg-bar:#a7f3d0">
    <div class="pg-head"><div><p class="pg-kicker">Acme Studio · Projects</p><h2 class="pg-title">Brand refresh</h2></div><span class="pg-chip">Due 3 November</span></div>
    <div class="pg-tiles"><div class="pg-tile"><span>Open tasks</span><b>18</b></div><div class="pg-tile"><span>Completed</span><b>42</b><em>+7 this week</em></div><div class="pg-tile"><span>Team</span><b>6 people</b></div></div>
    <div class="pg-chart" aria-hidden="true"><i style="height:42%"></i><i style="height:55%"></i><i style="height:50%"></i><i style="height:68%"></i><i style="height:60%"></i><i style="height:74%"></i><i style="height:66%"></i><i style="height:80%"></i><i style="height:58%"></i><i style="height:72%"></i><i style="height:64%"></i><i style="height:86%"></i></div>
  </div>
</div></div>
<div><span class="lbl">Profile header with stats and footer actions</span>
<div class="app d-flex">
  <nav class="ps ps-profile d-flex flex-column" aria-label="Folio">
    <div class="ps-cover" aria-hidden="true"></div>
    <div class="ps-me">
      <span class="ps-avatar" aria-hidden="true">DO</span>
      <h2>Daniel Osei</h2>
      <p>Senior product designer, Accra</p>
      <span class="ps-status">Available for work</span>
    </div>
    <dl class="ps-stats row g-0 text-center"><div class="col d-flex flex-column-reverse"><dt>Projects</dt><dd class="m-0">24</dd></div><div class="col d-flex flex-column-reverse"><dt>Followers</dt><dd class="m-0">1.2k</dd></div><div class="col d-flex flex-column-reverse"><dt>Following</dt><dd class="m-0">318</dd></div></dl>
    <form class="ps-search position-relative" role="search"><label class="visually-hidden" for="pf-q">Search Folio</label><svg class="position-absolute" aria-hidden="true"><use href="#i-search"/></svg><input class="form-control" id="pf-q" type="search" placeholder="Search work and people"></form>
    <ul class="nav nav-pills flex-column">
      <li class="nav-item"><a class="nav-link active" href="#" aria-current="page"><svg aria-hidden="true"><use href="#i-user"/></svg><span>Profile</span></a></li>
      <li class="nav-item"><a class="nav-link" href="#"><svg aria-hidden="true"><use href="#i-zap"/></svg><span>Activity</span></a></li>
      <li class="nav-item"><a class="nav-link" href="#"><svg aria-hidden="true"><use href="#i-image"/></svg><span>Portfolio</span></a></li>
      <li class="nav-item"><a class="nav-link" href="#"><svg aria-hidden="true"><use href="#i-message"/></svg><span>Messages</span><span class="badge rounded-pill">3<span class="visually-hidden"> unread</span></span></a></li>
      <li class="nav-item"><a class="nav-link" href="#"><svg aria-hidden="true"><use href="#i-star"/></svg><span>Saved</span></a></li>
    </ul>
    <div class="ps-actions d-grid mt-auto" style="grid-template-columns:1fr 1fr"><a class="btn ps-btn" href="#"><svg aria-hidden="true"><use href="#i-sliders"/></svg>Settings</a><button class="btn ps-btn ps-btn-quiet" type="button"><svg aria-hidden="true"><use href="#i-logout"/></svg>Sign out</button></div>
  </nav>
  <div class="pg" style="--pg-bar:#fecdd3">
    <div class="pg-head"><div><p class="pg-kicker">Folio · Your profile</p><h2 class="pg-title">Daniel Osei</h2></div><span class="pg-chip">Open to freelance work</span></div>
    <div class="pg-tiles"><div class="pg-tile"><span>Profile views</span><b>2,418</b><em>+18%</em></div><div class="pg-tile"><span>Saves</span><b>312</b></div><div class="pg-tile"><span>Hire requests</span><b>5</b></div></div>
    <div class="pg-chart" aria-hidden="true"><i style="height:34%"></i><i style="height:48%"></i><i style="height:42%"></i><i style="height:60%"></i><i style="height:54%"></i><i style="height:70%"></i><i style="height:62%"></i><i style="height:58%"></i><i style="height:76%"></i><i style="height:68%"></i><i style="height:82%"></i><i style="height:74%"></i></div>
  </div>
</div></div>
CSS 
/* App shell. Uses Bootstrap .nav-pills, .dropdown (switcher), .form-control, .progress, .badge and .btn, restyled below. */
.app{height:600px;background:#fff;border:1px solid #d6dce5;border-radius:16px;overflow:hidden;
  box-shadow:0 1px 2px rgba(15,23,42,.05),0 18px 40px -22px rgba(15,23,42,.28)}
.ps{--ps-accent:#047857;--ps-active-bg:#e8f7f0;--ps-active-ink:#065f46;--ps-strong:#0f172a;--ps-muted:#5b6474;--ps-line:#e5e9f0;--ps-hover:#f1f5f9;
  flex:0 0 264px;padding:14px;background:#fff;border-right:1px solid var(--ps-line);overflow-y:auto;font-size:.875rem}
.ps .nav{--bs-nav-link-color:#475569;--bs-nav-link-hover-color:var(--ps-strong);--bs-nav-link-padding-x:10px;--bs-nav-link-padding-y:8px;
  --bs-nav-link-font-size:.875rem;--bs-nav-link-font-weight:500;--bs-nav-pills-border-radius:8px;
  --bs-nav-pills-link-active-bg:var(--ps-active-bg);--bs-nav-pills-link-active-color:var(--ps-active-ink);gap:2px;flex-wrap:nowrap}
.ps .nav-link{display:flex;align-items:center;gap:11px;line-height:1.5}
.ps .nav-link svg{width:18px;height:18px;flex:none}
.ps .nav-link:not(.active):hover{background:var(--ps-hover)}
.ps .nav-link.active{font-weight:600}
.ps .nav .badge{margin-left:auto;padding:0 7px;background:#e9edf3;color:#334155;font-size:.7rem;line-height:1.6}
.ps-heading{margin:14px 0 4px;padding:0 10px;font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ps-muted)}
.ps-swatch{width:10px;height:10px;margin:0 4px;border-radius:3px;flex:none}
.ps :is(a,button,input):focus-visible{box-shadow:none;outline:2px solid var(--ps-accent);outline-offset:2px}

.ps-ws{margin-bottom:12px}
.ps-ws-toggle{display:flex;align-items:center;gap:10px;width:100%;font-size:.875rem;padding:8px;border:1px solid var(--ps-line);border-radius:12px;background:#fff;text-align:left}
.ps-ws-toggle:hover{border-color:#c6cdd8}
.ps-ws-toggle::after{content:none}
.ps-ws-logo{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:9px;color:#fff;font-weight:800;font-size:.85rem}
.ps-ws-name{display:block;font-weight:700;color:var(--ps-strong);line-height:1.3}
.ps-ws-meta{display:block;font-size:.72rem;color:var(--ps-muted)}
.ps-ws-toggle>svg{width:16px;height:16px;margin-left:auto;color:var(--ps-muted)}
.ps-ws .dropdown-menu{--bs-dropdown-padding-x:6px;--bs-dropdown-padding-y:6px;--bs-dropdown-border-color:var(--ps-line);--bs-dropdown-border-radius:12px;
  --bs-dropdown-link-hover-bg:var(--ps-hover);--bs-dropdown-link-active-bg:var(--ps-hover);--bs-dropdown-link-active-color:var(--ps-strong);
  --bs-dropdown-item-padding-x:8px;--bs-dropdown-item-padding-y:7px;--bs-dropdown-item-border-radius:8px;--bs-dropdown-font-size:.875rem;
  --bs-dropdown-box-shadow:0 16px 32px -12px rgba(15,23,42,.3);width:100%;box-shadow:var(--bs-dropdown-box-shadow)}
.ps-ws .dropdown-item{display:flex;align-items:center;gap:10px;color:#475569}
.ps-ws .dropdown-item .ps-ws-logo{width:26px;height:26px;border-radius:7px;font-size:.72rem}
.ps-ws .dropdown-item svg{width:16px;height:16px;margin-left:auto;color:var(--ps-accent)}
.ps-ws .ps-ws-new{margin-top:4px;padding-top:9px;border-top:1px solid var(--ps-line);border-radius:0 0 8px 8px;color:var(--ps-muted)}
.ps-ws .ps-ws-new svg{margin:0 5px;color:inherit}

.ps-search{margin:0 0 12px}
.ps-search svg{left:11px;top:50%;width:16px;height:16px;margin-top:-8px;color:var(--ps-muted);pointer-events:none}
.ps-search .form-control{padding:8px 10px 8px 34px;border-color:#cdd4de;border-radius:9px;background:#f8fafc;font-size:.875rem;line-height:1.5}
.ps-search .form-control::placeholder{color:#6b7482}
.ps-search .form-control:focus{background:#fff;border-color:var(--ps-accent);box-shadow:none}

.ps-foot{gap:10px;padding-top:12px}
.ps-usage{padding:12px;border-radius:12px;background:#f3f6f9}
.ps-usage p{margin:0 0 8px;font-size:.78rem;color:#475569}
.ps-usage b{color:var(--ps-strong)}
.ps-usage .progress{--bs-progress-height:6px;--bs-progress-bg:#dde3ea;--bs-progress-bar-bg:var(--ps-accent);--bs-progress-border-radius:999px}
.ps-usage a{display:inline-block;margin-top:9px;border-radius:4px;color:var(--ps-accent);font-size:.78rem;font-weight:700;text-decoration:none}
.ps-usage a:hover{text-decoration:underline}
.ps-user{gap:10px;padding:8px 4px 0 6px;border-top:1px solid var(--ps-line)}
.ps-avatar{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fde68a;color:#78350f;font-size:.75rem;font-weight:800}
.ps-user b{display:block;color:var(--ps-strong);line-height:1.3}
.ps-user small{display:block;font-size:.72rem;color:var(--ps-muted)}
.ps-icon-btn{--bs-btn-padding-x:0;--bs-btn-padding-y:0;--bs-btn-color:var(--ps-muted);--bs-btn-hover-color:var(--ps-strong);--bs-btn-hover-bg:var(--ps-hover);
  --bs-btn-border-width:0;--bs-btn-border-radius:8px;display:grid;place-items:center;width:34px;height:34px}
.ps-icon-btn svg{width:18px;height:18px}

.ps-profile{--ps-accent:#be123c;--ps-active-bg:#fff0f3;--ps-active-ink:#9f1239;padding:0 14px 14px}
.ps-cover{flex:none;height:72px;margin:0 -14px;background:linear-gradient(120deg,#fb7185,#f472b6 45%,#a78bfa)}
.ps-me{margin-top:-30px;padding:0 6px}
.ps-me .ps-avatar{width:60px;height:60px;border:3px solid #fff;background:#1f2937;color:#fff;font-size:1rem}
.ps-me h2{margin:10px 0 0;font-size:1.05rem;font-weight:700;color:var(--ps-strong);line-height:1.5}
.ps-me p{margin:0;color:var(--ps-muted);font-size:.8rem}
.ps-status{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:2px 9px;border-radius:999px;background:#ecfdf3;color:#067647;font-size:.72rem;font-weight:700}
.ps-status::before{content:"";width:7px;height:7px;border-radius:50%;background:#12b76a}
.ps-stats{margin:14px 0;padding:10px 0;border-block:1px solid var(--ps-line)}
.ps-stats div{display:flex;flex-direction:column-reverse}
.ps-stats dt{font-size:.72rem;font-weight:400;color:var(--ps-muted)}
.ps-stats dd{margin:0;color:var(--ps-strong);font-size:1rem;font-weight:700}
.ps-actions{gap:8px;padding-top:12px}
.ps-btn{--bs-btn-padding-x:10px;--bs-btn-padding-y:8px;--bs-btn-font-size:.875rem;--bs-btn-font-weight:600;--bs-btn-color:var(--ps-strong);
  --bs-btn-hover-color:var(--ps-strong);--bs-btn-bg:#fff;--bs-btn-hover-bg:var(--ps-hover);--bs-btn-border-color:#cdd4de;--bs-btn-hover-border-color:#cdd4de;
  --bs-btn-border-radius:9px;display:flex;align-items:center;justify-content:center;gap:7px}
.ps-btn svg{width:16px;height:16px}
.ps-btn-quiet{--bs-btn-border-color:transparent;--bs-btn-hover-border-color:transparent;--bs-btn-color:#b42318;--bs-btn-hover-color:#b42318;--bs-btn-hover-bg:#fef3f2}

@media (max-width:640px){
  .app{flex-direction:column!important;height:auto}
  .ps{flex-basis:auto;border-right:0;border-bottom:1px solid var(--ps-line)}
}
@media (prefers-reduced-motion:reduce){.ps .nav-link,.ps .btn{transition:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <symbol id="i-updown" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m8 9 4-4 4 4M8 15l4 4 4-4"/></symbol>
  <symbol id="i-tasks" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="3.5" width="17" height="17" rx="3.5"/><path d="m8 12 3 3 5-6"/></symbol>
  <symbol id="i-plus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></symbol>
  <symbol id="i-search" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="6.5"/><path d="m20 20-4.2-4.2"/></symbol>
  <symbol id="i-home" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 10.5 12 4l8.5 6.5V19.5a1 1 0 0 1-1 1h-5v-6h-5v6h-5a1 1 0 0 1-1-1z"/></symbol>
  <symbol id="i-folder" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 7a1.5 1.5 0 0 1 1.5-1.5h4.3l2 2.5H19a1.5 1.5 0 0 1 1.5 1.5v8.5A1.5 1.5 0 0 1 19 19.5H5A1.5 1.5 0 0 1 3.5 18z"/></symbol>
  <symbol id="i-chart" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4v16h16"/><path d="M8.5 16v-4M12.5 16V8M16.5 16v-6"/></symbol>
  <symbol id="i-logout" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14 4h4.5A1.5 1.5 0 0 1 20 5.5v13a1.5 1.5 0 0 1-1.5 1.5H14"/><path d="M9.5 16.5 5 12l4.5-4.5M5 12h10"/></symbol>
  <symbol id="i-user" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4.5 20.5c.8-4 3.7-6 7.5-6s6.7 2 7.5 6"/></symbol>
  <symbol id="i-zap" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M13 3 5 13.5h6.5L11 21l8-10.5h-6.5z"/></symbol>
  <symbol id="i-image" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="4.5" width="17" height="15" rx="2.5"/><circle cx="9" cy="10" r="1.8"/><path d="m20.5 16-5-5-9 8.5"/></symbol>
  <symbol id="i-message" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5.5h16v11H9.5L4 20.5z"/></symbol>
  <symbol id="i-star" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m12 4 2.5 5 5.5.8-4 3.9.9 5.5L12 16.6l-4.9 2.6.9-5.5-4-3.9L9.5 9z"/></symbol>
  <symbol id="i-sliders" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h9M17 7h3M4 17h3M11 17h9"/><circle cx="15" cy="7" r="2"/><circle cx="9" cy="17" r="2"/></symbol>
</svg>
<div><span class="mb-3.5 block text-[.72rem] tracking-[.12em] text-[#5b6474] uppercase">Workspace switcher, search and a usage footer</span>
<div class="flex h-[600px] overflow-hidden rounded-2xl border border-[#d6dce5] bg-white shadow-[0_1px_2px_rgba(15,23,42,.05),0_18px_40px_-22px_rgba(15,23,42,.28)] max-[640px]:h-auto max-[640px]:flex-col">
  <nav class="flex flex-none basis-[264px] flex-col overflow-y-auto border-r border-[#e5e9f0] bg-white text-[.875rem] max-[640px]:basis-auto max-[640px]:border-r-0 max-[640px]:border-b p-3.5" aria-label="Acme Studio">
    <details class="group relative mb-3">
      <summary class="flex cursor-pointer list-none items-center gap-2.5 rounded-xl border border-[#e5e9f0] p-2 transition-colors duration-150 hover:border-[#c6cdd8] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#047857] motion-reduce:transition-none [&::-webkit-details-marker]:hidden"><span class="grid size-[34px] flex-none place-items-center rounded-[9px] text-[.85rem] font-extrabold text-white" style="background:linear-gradient(135deg,#10b981,#047857)" aria-hidden="true">A</span><span><span class="block leading-[1.3] font-bold text-[#0f172a]">Acme Studio</span><span class="block text-[.72rem] text-[#5b6474]">Pro plan · 12 members</span></span><svg class="ml-auto size-4 text-[#5b6474]" aria-hidden="true"><use href="#i-updown"/></svg><span class="sr-only">Switch workspace</span></summary>
      <ul class="absolute inset-x-0 top-[calc(100%+6px)] z-[5] m-0 list-none rounded-xl border border-[#e5e9f0] bg-white p-1.5 shadow-[0_16px_32px_-12px_rgba(15,23,42,.3)]">
        <li><a class="flex items-center gap-2.5 rounded-lg px-2 py-[7px] text-[#475569] no-underline hover:bg-[#f1f5f9] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#047857]" href="#" aria-current="true"><span class="grid size-[26px] flex-none place-items-center rounded-[7px] text-[.72rem] font-extrabold text-white" style="background:linear-gradient(135deg,#10b981,#047857)" aria-hidden="true">A</span>Acme Studio<svg class="ml-auto size-4 text-[#047857]" aria-hidden="true"><use href="#i-tasks"/></svg></a></li>
        <li><a class="flex items-center gap-2.5 rounded-lg px-2 py-[7px] text-[#475569] no-underline hover:bg-[#f1f5f9] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#047857]" href="#"><span class="grid size-[26px] flex-none place-items-center rounded-[7px] text-[.72rem] font-extrabold text-white" style="background:linear-gradient(135deg,#f59e0b,#b45309)" aria-hidden="true">F</span>Fieldnotes</a></li>
        <li><a class="flex items-center gap-2.5 rounded-lg px-2 py-[7px] text-[#475569] no-underline hover:bg-[#f1f5f9] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#047857]" href="#"><span class="grid size-[26px] flex-none place-items-center rounded-[7px] text-[.72rem] font-extrabold text-white" style="background:linear-gradient(135deg,#64748b,#334155)" aria-hidden="true">P</span>Personal</a></li>
        <li><a class="mt-1 flex items-center gap-2.5 rounded-b-lg border-t border-[#e5e9f0] px-2 pt-[9px] pb-[7px] text-[#5b6474] no-underline hover:bg-[#f1f5f9] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#047857]" href="#"><svg class="mx-[5px] size-4" aria-hidden="true"><use href="#i-plus"/></svg>Create workspace</a></li>
      </ul>
    </details>
    <form class="relative m-0 mb-3" role="search"><label class="sr-only" for="ps-q">Search Acme Studio</label><svg class="pointer-events-none absolute top-1/2 left-[11px] -mt-2 size-4 text-[#5b6474]" aria-hidden="true"><use href="#i-search"/></svg><input class="w-full rounded-[9px] border border-[#cdd4de] bg-[#f8fafc] py-2 pr-2.5 pl-[34px] text-[#0f172a] placeholder:text-[#6b7482] focus:border-[#047857] focus:bg-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#047857]" id="ps-q" type="search" placeholder="Search projects and tasks"></form>
    <ul class="m-0 flex list-none flex-col gap-0.5 p-0">
      <li><a class="flex items-center gap-[11px] rounded-lg px-2.5 py-2 font-medium text-[#475569] no-underline transition-colors duration-150 hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#047857] motion-reduce:transition-none aria-[current=page]:bg-[#e8f7f0] aria-[current=page]:font-semibold aria-[current=page]:text-[#065f46]" href="#"><svg class="size-[18px] flex-none" aria-hidden="true"><use href="#i-home"/></svg><span>Home</span></a></li>
      <li><a class="flex items-center gap-[11px] rounded-lg px-2.5 py-2 font-medium text-[#475569] no-underline transition-colors duration-150 hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#047857] motion-reduce:transition-none aria-[current=page]:bg-[#e8f7f0] aria-[current=page]:font-semibold aria-[current=page]:text-[#065f46]" href="#" aria-current="page"><svg class="size-[18px] flex-none" aria-hidden="true"><use href="#i-folder"/></svg><span>Projects</span></a></li>
      <li><a class="flex items-center gap-[11px] rounded-lg px-2.5 py-2 font-medium text-[#475569] no-underline transition-colors duration-150 hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#047857] motion-reduce:transition-none aria-[current=page]:bg-[#e8f7f0] aria-[current=page]:font-semibold aria-[current=page]:text-[#065f46]" href="#"><svg class="size-[18px] flex-none" aria-hidden="true"><use href="#i-tasks"/></svg><span>Tasks</span><span class="ml-auto rounded-full bg-[#e9edf3] px-[7px] text-[.7rem] leading-[1.6] font-bold text-[#334155]">5<span class="sr-only"> due</span></span></a></li>
      <li><a class="flex items-center gap-[11px] rounded-lg px-2.5 py-2 font-medium text-[#475569] no-underline transition-colors duration-150 hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#047857] motion-reduce:transition-none aria-[current=page]:bg-[#e8f7f0] aria-[current=page]:font-semibold aria-[current=page]:text-[#065f46]" href="#"><svg class="size-[18px] flex-none" aria-hidden="true"><use href="#i-chart"/></svg><span>Reports</span></a></li>
    </ul>
    <p class="mt-3.5 mb-1 px-2.5 text-[.6875rem] font-bold tracking-[.08em] text-[#5b6474] uppercase">Favourites</p>
    <ul class="m-0 flex list-none flex-col gap-0.5 p-0">
      <li><a class="flex items-center gap-[11px] rounded-lg px-2.5 py-2 font-medium text-[#475569] no-underline transition-colors duration-150 hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#047857] motion-reduce:transition-none aria-[current=page]:bg-[#e8f7f0] aria-[current=page]:font-semibold aria-[current=page]:text-[#065f46]" href="#"><span class="mx-1 size-2.5 flex-none rounded-[3px]" style="background:#10b981"></span><span>Brand refresh</span></a></li>
      <li><a class="flex items-center gap-[11px] rounded-lg px-2.5 py-2 font-medium text-[#475569] no-underline transition-colors duration-150 hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#047857] motion-reduce:transition-none aria-[current=page]:bg-[#e8f7f0] aria-[current=page]:font-semibold aria-[current=page]:text-[#065f46]" href="#"><span class="mx-1 size-2.5 flex-none rounded-[3px]" style="background:#6366f1"></span><span>Onboarding flow</span></a></li>
    </ul>
    <div class="mt-auto flex flex-col gap-2.5 pt-3">
      <div class="rounded-xl bg-[#f3f6f9] p-3">
        <p class="m-0 mb-2 flex justify-between text-[.78rem] text-[#475569]"><span>Storage</span><b class="text-[#0f172a]">7.4 of 10 GB</b></p>
        <div class="h-1.5 overflow-hidden rounded-full bg-[#dde3ea]" role="progressbar" aria-label="Storage used" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100"><span class="block h-full rounded-full bg-[#047857]" style="width:74%"></span></div>
        <a class="mt-[9px] inline-block rounded text-[.78rem] font-bold text-[#047857] no-underline hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#047857]" href="#">Upgrade plan</a>
      </div>
      <div class="flex items-center gap-2.5 border-t border-[#e5e9f0] pt-2 pr-1 pl-1.5"><span class="grid size-[34px] flex-none place-items-center rounded-full bg-[#fde68a] text-[.75rem] font-extrabold text-[#78350f]" aria-hidden="true">RK</span><div><b class="block leading-[1.3] text-[#0f172a]">Rosa Kim</b><small class="block text-[.72rem] text-[#5b6474]">[email protected]</small></div><button class="ml-auto grid size-[34px] flex-none cursor-pointer place-items-center rounded-lg border-0 bg-transparent p-0 text-[#5b6474] transition-colors duration-150 hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#047857] motion-reduce:transition-none" type="button" aria-label="Log out"><svg class="size-[18px]" aria-hidden="true"><use href="#i-logout"/></svg></button></div>
    </div>
  </nav>
  <div class="flex min-w-0 flex-1 flex-col gap-[18px] overflow-hidden bg-[#f8fafc] px-7 py-[26px] max-[640px]:px-[18px] max-[640px]:py-5">
    <div class="flex flex-wrap items-end justify-between gap-3"><div><p class="m-0 text-[.75rem] text-[#5b6474]">Acme Studio · Projects</p><h2 class="mt-0.5 mb-0 text-[1.25rem] leading-[1.3] font-bold tracking-[-.02em] text-[#0f172a]">Brand refresh</h2></div><span class="rounded-full border px-3 py-[5px] text-[.75rem] font-semibold border-[#d9dfe8] bg-white text-[#334155]">Due 3 November</span></div>
    <div class="grid grid-cols-[repeat(auto-fit,minmax(128px,1fr))] gap-3"><div class="rounded-xl border border-[#e2e8f0] bg-white px-[15px] py-[13px]"><span class="block text-[.75rem] text-[#5b6474]">Open tasks</span><b class="mt-[3px] block text-[1.2rem] leading-[1.3] tracking-[-.01em] text-[#0f172a]">18</b></div><div class="rounded-xl border border-[#e2e8f0] bg-white px-[15px] py-[13px]"><span class="block text-[.75rem] text-[#5b6474]">Completed</span><b class="mt-[3px] block text-[1.2rem] leading-[1.3] tracking-[-.01em] text-[#0f172a]">42</b><em class="text-[.72rem] font-semibold not-italic text-[#047857]">+7 this week</em></div><div class="rounded-xl border border-[#e2e8f0] bg-white px-[15px] py-[13px]"><span class="block text-[.75rem] text-[#5b6474]">Team</span><b class="mt-[3px] block text-[1.2rem] leading-[1.3] tracking-[-.01em] text-[#0f172a]">6 people</b></div></div>
    <div class="flex min-h-[110px] flex-1 items-end gap-2 rounded-xl border border-[#e2e8f0] bg-white px-4 pt-4 max-[640px]:h-[90px] max-[640px]:min-h-0 max-[640px]:flex-none" aria-hidden="true"><i class="flex-1 rounded-t-[5px] bg-[#a7f3d0] opacity-70" style="height:42%"></i><i class="flex-1 rounded-t-[5px] bg-[#a7f3d0]" style="height:55%"></i><i class="flex-1 rounded-t-[5px] bg-[#a7f3d0] opacity-70" style="height:50%"></i><i class="flex-1 rounded-t-[5px] bg-[#a7f3d0]" style="height:68%"></i><i class="flex-1 rounded-t-[5px] bg-[#a7f3d0] opacity-70" style="height:60%"></i><i class="flex-1 rounded-t-[5px] bg-[#a7f3d0]" style="height:74%"></i><i class="flex-1 rounded-t-[5px] bg-[#a7f3d0] opacity-70" style="height:66%"></i><i class="flex-1 rounded-t-[5px] bg-[#a7f3d0]" style="height:80%"></i><i class="flex-1 rounded-t-[5px] bg-[#a7f3d0] opacity-70" style="height:58%"></i><i class="flex-1 rounded-t-[5px] bg-[#a7f3d0]" style="height:72%"></i><i class="flex-1 rounded-t-[5px] bg-[#a7f3d0] opacity-70" style="height:64%"></i><i class="flex-1 rounded-t-[5px] bg-[#a7f3d0]" style="height:86%"></i></div>
  </div>
</div></div>
<div><span class="mb-3.5 block text-[.72rem] tracking-[.12em] text-[#5b6474] uppercase">Profile header with stats and footer actions</span>
<div class="flex h-[600px] overflow-hidden rounded-2xl border border-[#d6dce5] bg-white shadow-[0_1px_2px_rgba(15,23,42,.05),0_18px_40px_-22px_rgba(15,23,42,.28)] max-[640px]:h-auto max-[640px]:flex-col">
  <nav class="flex flex-none basis-[264px] flex-col overflow-y-auto border-r border-[#e5e9f0] bg-white text-[.875rem] max-[640px]:basis-auto max-[640px]:border-r-0 max-[640px]:border-b px-3.5 pt-0 pb-3.5" aria-label="Folio">
    <div class="-mx-3.5 h-[72px] flex-none bg-[linear-gradient(120deg,#fb7185,#f472b6_45%,#a78bfa)]" aria-hidden="true"></div>
    <div class="-mt-[30px] px-1.5">
      <span class="grid size-[60px] place-items-center rounded-full border-[3px] border-white bg-[#1f2937] text-[1rem] font-extrabold text-white" aria-hidden="true">DO</span>
      <h2 class="mt-2.5 mb-0 text-[1.05rem] font-bold text-[#0f172a]">Daniel Osei</h2>
      <p class="m-0 text-[.8rem] text-[#5b6474]">Senior product designer, Accra</p>
      <span class="mt-2 inline-flex items-center gap-1.5 rounded-full bg-[#ecfdf3] px-[9px] py-0.5 text-[.72rem] font-bold text-[#067647] before:size-[7px] before:rounded-full before:bg-[#12b76a]">Available for work</span>
    </div>
    <dl class="my-3.5 grid grid-cols-3 border-y border-[#e5e9f0] py-2.5 text-center"><div class="flex flex-col-reverse"><dt class="text-[.72rem] text-[#5b6474]">Projects</dt><dd class="m-0 text-[1rem] font-bold text-[#0f172a]">24</dd></div><div class="flex flex-col-reverse"><dt class="text-[.72rem] text-[#5b6474]">Followers</dt><dd class="m-0 text-[1rem] font-bold text-[#0f172a]">1.2k</dd></div><div class="flex flex-col-reverse"><dt class="text-[.72rem] text-[#5b6474]">Following</dt><dd class="m-0 text-[1rem] font-bold text-[#0f172a]">318</dd></div></dl>
    <form class="relative m-0 mb-3" role="search"><label class="sr-only" for="pf-q">Search Folio</label><svg class="pointer-events-none absolute top-1/2 left-[11px] -mt-2 size-4 text-[#5b6474]" aria-hidden="true"><use href="#i-search"/></svg><input class="w-full rounded-[9px] border border-[#cdd4de] bg-[#f8fafc] py-2 pr-2.5 pl-[34px] text-[#0f172a] placeholder:text-[#6b7482] focus:border-[#be123c] focus:bg-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#be123c]" id="pf-q" type="search" placeholder="Search work and people"></form>
    <ul class="m-0 flex list-none flex-col gap-0.5 p-0">
      <li><a class="flex items-center gap-[11px] rounded-lg px-2.5 py-2 font-medium text-[#475569] no-underline transition-colors duration-150 hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#be123c] motion-reduce:transition-none aria-[current=page]:bg-[#fff0f3] aria-[current=page]:font-semibold aria-[current=page]:text-[#9f1239]" href="#" aria-current="page"><svg class="size-[18px] flex-none" aria-hidden="true"><use href="#i-user"/></svg><span>Profile</span></a></li>
      <li><a class="flex items-center gap-[11px] rounded-lg px-2.5 py-2 font-medium text-[#475569] no-underline transition-colors duration-150 hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#be123c] motion-reduce:transition-none aria-[current=page]:bg-[#fff0f3] aria-[current=page]:font-semibold aria-[current=page]:text-[#9f1239]" href="#"><svg class="size-[18px] flex-none" aria-hidden="true"><use href="#i-zap"/></svg><span>Activity</span></a></li>
      <li><a class="flex items-center gap-[11px] rounded-lg px-2.5 py-2 font-medium text-[#475569] no-underline transition-colors duration-150 hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#be123c] motion-reduce:transition-none aria-[current=page]:bg-[#fff0f3] aria-[current=page]:font-semibold aria-[current=page]:text-[#9f1239]" href="#"><svg class="size-[18px] flex-none" aria-hidden="true"><use href="#i-image"/></svg><span>Portfolio</span></a></li>
      <li><a class="flex items-center gap-[11px] rounded-lg px-2.5 py-2 font-medium text-[#475569] no-underline transition-colors duration-150 hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#be123c] motion-reduce:transition-none aria-[current=page]:bg-[#fff0f3] aria-[current=page]:font-semibold aria-[current=page]:text-[#9f1239]" href="#"><svg class="size-[18px] flex-none" aria-hidden="true"><use href="#i-message"/></svg><span>Messages</span><span class="ml-auto rounded-full bg-[#e9edf3] px-[7px] text-[.7rem] leading-[1.6] font-bold text-[#334155]">3<span class="sr-only"> unread</span></span></a></li>
      <li><a class="flex items-center gap-[11px] rounded-lg px-2.5 py-2 font-medium text-[#475569] no-underline transition-colors duration-150 hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#be123c] motion-reduce:transition-none aria-[current=page]:bg-[#fff0f3] aria-[current=page]:font-semibold aria-[current=page]:text-[#9f1239]" href="#"><svg class="size-[18px] flex-none" aria-hidden="true"><use href="#i-star"/></svg><span>Saved</span></a></li>
    </ul>
    <div class="mt-auto grid grid-cols-2 gap-2 pt-3"><a class="flex items-center justify-center gap-[7px] rounded-[9px] border border-[#cdd4de] bg-white px-2.5 py-2 font-semibold text-[#0f172a] no-underline transition-colors duration-150 hover:bg-[#f1f5f9] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#be123c] motion-reduce:transition-none" href="#"><svg class="size-4" aria-hidden="true"><use href="#i-sliders"/></svg>Settings</a><button class="flex cursor-pointer items-center justify-center gap-[7px] rounded-[9px] border border-transparent bg-white px-2.5 py-2 font-semibold text-[#b42318] transition-colors duration-150 hover:bg-[#fef3f2] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#be123c] motion-reduce:transition-none" type="button"><svg class="size-4" aria-hidden="true"><use href="#i-logout"/></svg>Sign out</button></div>
  </nav>
  <div class="flex min-w-0 flex-1 flex-col gap-[18px] overflow-hidden bg-[#f8fafc] px-7 py-[26px] max-[640px]:px-[18px] max-[640px]:py-5">
    <div class="flex flex-wrap items-end justify-between gap-3"><div><p class="m-0 text-[.75rem] text-[#5b6474]">Folio · Your profile</p><h2 class="mt-0.5 mb-0 text-[1.25rem] leading-[1.3] font-bold tracking-[-.02em] text-[#0f172a]">Daniel Osei</h2></div><span class="rounded-full border px-3 py-[5px] text-[.75rem] font-semibold border-[#d9dfe8] bg-white text-[#334155]">Open to freelance work</span></div>
    <div class="grid grid-cols-[repeat(auto-fit,minmax(128px,1fr))] gap-3"><div class="rounded-xl border border-[#e2e8f0] bg-white px-[15px] py-[13px]"><span class="block text-[.75rem] text-[#5b6474]">Profile views</span><b class="mt-[3px] block text-[1.2rem] leading-[1.3] tracking-[-.01em] text-[#0f172a]">2,418</b><em class="text-[.72rem] font-semibold not-italic text-[#047857]">+18%</em></div><div class="rounded-xl border border-[#e2e8f0] bg-white px-[15px] py-[13px]"><span class="block text-[.75rem] text-[#5b6474]">Saves</span><b class="mt-[3px] block text-[1.2rem] leading-[1.3] tracking-[-.01em] text-[#0f172a]">312</b></div><div class="rounded-xl border border-[#e2e8f0] bg-white px-[15px] py-[13px]"><span class="block text-[.75rem] text-[#5b6474]">Hire requests</span><b class="mt-[3px] block text-[1.2rem] leading-[1.3] tracking-[-.01em] text-[#0f172a]">5</b></div></div>
    <div class="flex min-h-[110px] flex-1 items-end gap-2 rounded-xl border border-[#e2e8f0] bg-white px-4 pt-4 max-[640px]:h-[90px] max-[640px]:min-h-0 max-[640px]:flex-none" aria-hidden="true"><i class="flex-1 rounded-t-[5px] bg-[#fecdd3] opacity-70" style="height:34%"></i><i class="flex-1 rounded-t-[5px] bg-[#fecdd3]" style="height:48%"></i><i class="flex-1 rounded-t-[5px] bg-[#fecdd3] opacity-70" style="height:42%"></i><i class="flex-1 rounded-t-[5px] bg-[#fecdd3]" style="height:60%"></i><i class="flex-1 rounded-t-[5px] bg-[#fecdd3] opacity-70" style="height:54%"></i><i class="flex-1 rounded-t-[5px] bg-[#fecdd3]" style="height:70%"></i><i class="flex-1 rounded-t-[5px] bg-[#fecdd3] opacity-70" style="height:62%"></i><i class="flex-1 rounded-t-[5px] bg-[#fecdd3]" style="height:58%"></i><i class="flex-1 rounded-t-[5px] bg-[#fecdd3] opacity-70" style="height:76%"></i><i class="flex-1 rounded-t-[5px] bg-[#fecdd3]" style="height:68%"></i><i class="flex-1 rounded-t-[5px] bg-[#fecdd3] opacity-70" style="height:82%"></i><i class="flex-1 rounded-t-[5px] bg-[#fecdd3]" style="height:74%"></i></div>
  </div>
</div></div>

About this set

Two fuller sidebars that carry more than links. The workspace sidebar starts with a switcher that opens a menu of three workspaces and a Create workspace link, then a search field, the main links with a task count, a Favourites group with colour squares, a storage card with a 74 percent meter and an Upgrade plan link, and the signed-in user with an icon button to log out. The profile sidebar opens with a gradient cover, a large avatar, the person’s name, role and an Available for work status, a row of stats for projects, followers and following, then search, links with an unread count, and Settings and Sign out buttons side by side at the bottom. Use the first for team tools where people switch accounts, and the second for portfolio, social or marketplace apps. In plain CSS and Tailwind the switcher is a details element, so it needs no script; the Bootstrap version uses the Dropdown plugin, which also closes on an outside click. The search is a form with role=”search” and a visually hidden label, the meter has role=”progressbar” with its value, and the stats are a description list.

What’s included

  • Workspace switcher: details in CSS and Tailwind, Dropdown in Bootstrap
  • Search form with a real, visually hidden label
  • Storage meter with role="progressbar" and its value
  • Profile header with cover, status and a stats description list
  • Footer with the signed-in user and an icon-only Log out button

Accessibility

The search inputs have labels, the storage meter exposes its value and name, and the icon-only Log out button has an aria-label. The switcher opens with Enter or Space and announces its state; in Bootstrap it also supports arrow keys and Esc. Stats are a dl, so each number is read with its label, every control shows a visible focus outline, and transitions stop under prefers-reduced-motion.

Customise it

Change the --ps-* custom properties on .ps for the accent, active background and lines; the profile variant overrides them on .ps-profile. Bootstrap maps them onto .nav, .dropdown-menu (--bs-dropdown-*), .progress (--bs-progress-*) and .btn; in Tailwind edit the hex values in the utilities.