30 Tailwind CSS Sidebar Layouts
30 / 30

All 30 in 30 Tailwind CSS Sidebar Layouts

  1. 01Tailwind SaaS Dashboard Sidebar with Native Dark Mode Switch
  2. 02Tailwind Collapsible Admin Sidebar with Icon Tooltips
  3. 03Tailwind Documentation Sidebar with Multi-Level :target Tree
  4. 04Tailwind Responsive Sidebar to Bottom Navigation Switch Layout
  5. 05Tailwind Analytics Sidebar with CSS Subgrid Column Alignment
  6. 06Tailwind Animated Collapsible Sidebar with Icon-Only Mode
  7. 07Tailwind Sticky Sidebar Layout with Scroll-Driven Progress Bar
  8. 08Tailwind Pure CSS Collapsible Sidebar Drawer without JavaScript
  9. 09Tailwind Fixed Sidebar Layout with Independently Scrolling Content
  10. 10Tailwind Off-Canvas Navigation Drawer with the Popover API
  11. 11Tailwind Right-Aligned Sidebar Layout for Inspector Panels
  12. 12Tailwind Two-Pane Webmail Layout with List and Reading Pane
  13. 13Tailwind Dual Sidebar App Shell with Left Nav and Context Panel
  14. 14Tailwind Mini Icon Rail Sidebar with Anchor-Positioned Active Pill
  15. 15Tailwind E-Commerce Filter Sidebar with Native Details Accordion
  16. 16Tailwind Floating Glassmorphism Sidebar with Gradient Hairline
  17. 17Tailwind Sidebar Menu with Pinned User Profile Footer
  18. 18Tailwind Push-Content Sidebar Drawer with GPU Transitions
  19. 19Tailwind Off-Canvas Cart Overlay with Blurred Backdrop Scrim
  20. 20Tailwind Sidebar with Persistent Collapsed State in localStorage
  21. 21Tailwind Sidebar with Sticky Search Bar Inside the Rail
  22. 22Tailwind Section-Grouped Sidebar Navigation with Header Labels
  23. 23Tailwind Sliding Active Indicator Sidebar with CSS :target
  24. 24Tailwind Multi-Level Nested Tree Sidebar with Details Branches
  25. 25Tailwind Tabbed Sidebar with Radio-Driven Panel Switching
  26. 26Tailwind Onboarding Wizard Sidebar with Step Progress Tracking
  27. 27Tailwind Resizable Sidebar Layout Using the CSS Resize Property
  28. 28Tailwind Three-Pane Workspace Shell with Icon Rail and List
  29. 29Tailwind Adaptive Sidebar Layout Using CSS Container Queries
  30. 30Tailwind Frosted Glass Floating Sidebar with Animated Aurora
Pure TailwindMIT licensed

Tailwind Frosted Glass Floating Sidebar with Animated Aurora

The showpiece: a floating frosted pane over a slowly drifting aurora, with heavy blur and saturation, a light-catching hairline, glass nav pills and a glowing gradient CTA — art-directed to the edge while staying readable, keyboard-navigable and reduced-motion safe.

Live Demo
Plain CSSTailwind v4
Try it

Mosaic by Cruip: a complete Tailwind admin dashboard template in HTML, React, Next.js and Vue · $69

Cruip · Mosaic by Cruip · Affiliate link

View Mosaic dashboard

The code

<section class="tsl-30 relative isolate w-full h-svh min-h-svh grid grid-cols-[auto_1fr] overflow-hidden font-tsl30-sans text-tsl30-ink bg-[oklch(0.15_0.03_290)] before:content-[''] before:absolute before:-inset-[30%] before:-z-10 before:pointer-events-none before:bg-[radial-gradient(38%_42%_at_30%_30%,oklch(0.55_0.22_310/0.8),transparent_70%),radial-gradient(34%_38%_at_72%_62%,oklch(0.6_0.18_230/0.7),transparent_70%),radial-gradient(30%_34%_at_50%_85%,oklch(0.65_0.16_180/0.5),transparent_70%)] before:animate-tsl30-drift motion-reduce:before:animate-none">
  <aside aria-label="Portfolio" class="tsl-30-glass w-64 m-5 flex flex-col px-4 py-6 rounded-[22px] border border-transparent backdrop-blur-[22px] backdrop-saturate-[1.8] shadow-[0_12px_40px_oklch(0_0_0/0.35),inset_0_1px_0_rgb(255_255_255/0.2)]">
    <div class="flex items-center gap-[11px] px-2.5 pt-0.5 pb-6 text-base font-bold tracking-[0.01em]"><span aria-hidden="true" class="w-7 h-7 rounded-full bg-[conic-gradient(oklch(0.75_0.16_310),oklch(0.75_0.14_230),oklch(0.78_0.14_180),oklch(0.75_0.16_310))] shadow-[0_0_16px_oklch(0.7_0.18_290/0.6)]"></span>Aurora Studio</div>
    <nav class="flex flex-col gap-1">
      <a href="#" aria-current="page" class="flex items-center min-h-11 px-3.5 rounded-xl text-[14.5px] font-medium text-tsl30-mut no-underline transition-colors duration-200 hover:text-tsl30-ink hover:bg-white/10 aria-[current=page]:text-tsl30-ink aria-[current=page]:bg-white/[0.16] aria-[current=page]:shadow-[inset_0_1px_0_rgb(255_255_255/0.18)] focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-[3px]">Work</a>
      <a href="#" class="flex items-center min-h-11 px-3.5 rounded-xl text-[14.5px] font-medium text-tsl30-mut no-underline transition-colors duration-200 hover:text-tsl30-ink hover:bg-white/10 focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-[3px]">About</a>
      <a href="#" class="flex items-center min-h-11 px-3.5 rounded-xl text-[14.5px] font-medium text-tsl30-mut no-underline transition-colors duration-200 hover:text-tsl30-ink hover:bg-white/10 focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-[3px]">Journal</a>
      <a href="#" class="flex items-center min-h-11 px-3.5 rounded-xl text-[14.5px] font-medium text-tsl30-mut no-underline transition-colors duration-200 hover:text-tsl30-ink hover:bg-white/10 focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-[3px]">Contact</a>
    </nav>
    <a href="#" class="group mt-auto flex items-center justify-center gap-2.5 min-h-12 rounded-[14px] text-sm font-bold no-underline text-tsl30-onaccent bg-[linear-gradient(120deg,oklch(0.85_0.1_310),oklch(0.87_0.09_220))] shadow-[0_6px_24px_oklch(0.7_0.18_290/0.45)] transition-[translate,box-shadow] duration-200 hover:-translate-y-px hover:shadow-[0_10px_32px_oklch(0.7_0.18_290/0.6)] focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-[3px] motion-reduce:transition-none motion-reduce:hover:translate-y-0">Start a project<svg viewBox="0 0 24 24" aria-hidden="true" class="w-4 h-4 fill-none stroke-current stroke-[2.2] [stroke-linecap:round] [stroke-linejoin:round] transition-transform duration-200 group-hover:translate-x-[3px] motion-reduce:transition-none motion-reduce:group-hover:translate-x-0"><path d="M5 12h14m-6-6 6 6-6 6"/></svg></a>
  </aside>
  <main class="grid content-center gap-[18px] px-14 py-12">
    <h1 class="text-[clamp(34px,5vw,54px)] font-extrabold leading-[1.08] tracking-[-0.02em] [text-shadow:0_2px_24px_oklch(0_0_0/0.3)]">Design that<br>holds light.</h1>
    <p class="max-w-[46ch] text-[15px] leading-[1.7] text-tsl30-mut text-pretty">A brand &amp; digital studio. The sidebar is one pane of frosted glass over a living aurora &mdash; blur, saturation and a light-catching hairline.</p>
  </main>
</section>
@import "tailwindcss";

@theme {
  --color-tsl30-ink: #f7f5fb;
  --color-tsl30-ink: oklch(0.97 0.005 300);
  --color-tsl30-mut: #ccc6d9;
  --color-tsl30-mut: oklch(0.86 0.02 300);
  --color-tsl30-onaccent: #24203a;
  --color-tsl30-onaccent: oklch(0.2 0.04 300);
  --font-tsl30-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --animate-tsl30-drift: tsl30-drift 24s ease-in-out infinite alternate;
}

@keyframes tsl30-drift {
  from {
    transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1);
  }

  to {
    transform: translate3d(3%, 2%, 0) rotate(4deg) scale(1.08);
  }
}

.tsl-30 {
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  color-scheme: dark;
}
/* The lit-glass hairline again (see demo 16): two background layers with
   different clip boxes, the one thing with no utility path. */

.tsl-30-glass {
  background: linear-gradient(rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.08)) padding-box, linear-gradient(155deg, rgb(255 255 255 / 0.6), rgb(255 255 255 / 0.15) 35%, rgb(255 255 255 / 0.04)) border-box;
  -webkit-backdrop-filter: blur(22px) saturate(1.8);
}

Setup — do this once per project

Skip this if your project already runs Tailwind v4.

1Load Tailwind
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Compiles in the browser — perfect for a CodePen or a quick test, not for production.

2Add the stylesheetRequiredthe @theme block is what makes the custom utilities exist
@import "tailwindcss";

@theme {
  --color-tsl30-ink: #f7f5fb;
  --color-tsl30-ink: oklch(0.97 0.005 300);
  --color-tsl30-mut: #ccc6d9;
  --color-tsl30-mut: oklch(0.86 0.02 300);
  --color-tsl30-onaccent: #24203a;
  --color-tsl30-onaccent: oklch(0.2 0.04 300);
  --font-tsl30-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --animate-tsl30-drift: tsl30-drift 24s ease-in-out infinite alternate;
}

@keyframes tsl30-drift {
  from {
    transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1);
  }

  to {
    transform: translate3d(3%, 2%, 0) rotate(4deg) scale(1.08);
  }
}

.tsl-30 {
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  color-scheme: dark;
}
/* The lit-glass hairline again (see demo 16): two background layers with
   different clip boxes, the one thing with no utility path. */

.tsl-30-glass {
  background: linear-gradient(rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.08)) padding-box, linear-gradient(155deg, rgb(255 255 255 / 0.6), rgb(255 255 255 / 0.15) 35%, rgb(255 255 255 / 0.04)) border-box;
  -webkit-backdrop-filter: blur(22px) saturate(1.8);
}
3Fonts used by this demooptional — skip if you have your own type stack
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap">

What changed in the port

Which parts became utilities, which stayed CSS, and why.

  • Putting the aurora on before: utilities rather than a CSS rule keeps the art direction in the markup, where a designer editing this file will find it. Three radial gradients in one arbitrary value is long, but it is legible, and the underscore escape carries the whole multi-layer value through intact.
  • The CTA's arrow nudge uses group-hover:translate-x-[3px] with a motion-reduce: reset — the same discipline as the collection's other micro-interactions, and the reason none of them fail the reduced-motion guard.
  • UI change from the CSS original: nav pills are min-h-11 and the CTA min-h-12, muted text moved from oklch(0.85) to 0.86 for the brightest aurora frame, and the CTA's hover lift now has an explicit reduced-motion fallback that keeps the shadow change.
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS demo from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Tailwind Frosted Glass Floating Sidebar with Animated Aurora
Source: https://codefronts.com/layouts/tailwind-css-sidebar-layouts/tailwind-frosted-glass-floating-sidebar-aurora/

The showpiece: a floating frosted pane over a slowly drifting aurora, with heavy blur and saturation, a light-catching hairline, glass nav pills and a glowing gradient CTA &mdash; art-directed to the edge while staying readable, keyboard-navigable and reduced-motion safe.
## HTML
```html
<section class="tsl-30 relative isolate w-full h-svh min-h-svh grid grid-cols-[auto_1fr] overflow-hidden font-tsl30-sans text-tsl30-ink bg-[oklch(0.15_0.03_290)] before:content-[''] before:absolute before:-inset-[30%] before:-z-10 before:pointer-events-none before:bg-[radial-gradient(38%_42%_at_30%_30%,oklch(0.55_0.22_310/0.8),transparent_70%),radial-gradient(34%_38%_at_72%_62%,oklch(0.6_0.18_230/0.7),transparent_70%),radial-gradient(30%_34%_at_50%_85%,oklch(0.65_0.16_180/0.5),transparent_70%)] before:animate-tsl30-drift motion-reduce:before:animate-none">
  <aside aria-label="Portfolio" class="tsl-30-glass w-64 m-5 flex flex-col px-4 py-6 rounded-[22px] border border-transparent backdrop-blur-[22px] backdrop-saturate-[1.8] shadow-[0_12px_40px_oklch(0_0_0/0.35),inset_0_1px_0_rgb(255_255_255/0.2)]">
    <div class="flex items-center gap-[11px] px-2.5 pt-0.5 pb-6 text-base font-bold tracking-[0.01em]"><span aria-hidden="true" class="w-7 h-7 rounded-full bg-[conic-gradient(oklch(0.75_0.16_310),oklch(0.75_0.14_230),oklch(0.78_0.14_180),oklch(0.75_0.16_310))] shadow-[0_0_16px_oklch(0.7_0.18_290/0.6)]"></span>Aurora Studio</div>
    <nav class="flex flex-col gap-1">
      <a href="#" aria-current="page" class="flex items-center min-h-11 px-3.5 rounded-xl text-[14.5px] font-medium text-tsl30-mut no-underline transition-colors duration-200 hover:text-tsl30-ink hover:bg-white/10 aria-[current=page]:text-tsl30-ink aria-[current=page]:bg-white/[0.16] aria-[current=page]:shadow-[inset_0_1px_0_rgb(255_255_255/0.18)] focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-[3px]">Work</a>
      <a href="#" class="flex items-center min-h-11 px-3.5 rounded-xl text-[14.5px] font-medium text-tsl30-mut no-underline transition-colors duration-200 hover:text-tsl30-ink hover:bg-white/10 focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-[3px]">About</a>
      <a href="#" class="flex items-center min-h-11 px-3.5 rounded-xl text-[14.5px] font-medium text-tsl30-mut no-underline transition-colors duration-200 hover:text-tsl30-ink hover:bg-white/10 focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-[3px]">Journal</a>
      <a href="#" class="flex items-center min-h-11 px-3.5 rounded-xl text-[14.5px] font-medium text-tsl30-mut no-underline transition-colors duration-200 hover:text-tsl30-ink hover:bg-white/10 focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-[3px]">Contact</a>
    </nav>
    <a href="#" class="group mt-auto flex items-center justify-center gap-2.5 min-h-12 rounded-[14px] text-sm font-bold no-underline text-tsl30-onaccent bg-[linear-gradient(120deg,oklch(0.85_0.1_310),oklch(0.87_0.09_220))] shadow-[0_6px_24px_oklch(0.7_0.18_290/0.45)] transition-[translate,box-shadow] duration-200 hover:-translate-y-px hover:shadow-[0_10px_32px_oklch(0.7_0.18_290/0.6)] focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-[3px] motion-reduce:transition-none motion-reduce:hover:translate-y-0">Start a project<svg viewBox="0 0 24 24" aria-hidden="true" class="w-4 h-4 fill-none stroke-current stroke-[2.2] [stroke-linecap:round] [stroke-linejoin:round] transition-transform duration-200 group-hover:translate-x-[3px] motion-reduce:transition-none motion-reduce:group-hover:translate-x-0"><path d="M5 12h14m-6-6 6 6-6 6"/></svg></a>
  </aside>
  <main class="grid content-center gap-[18px] px-14 py-12">
    <h1 class="text-[clamp(34px,5vw,54px)] font-extrabold leading-[1.08] tracking-[-0.02em] [text-shadow:0_2px_24px_oklch(0_0_0/0.3)]">Design that<br>holds light.</h1>
    <p class="max-w-[46ch] text-[15px] leading-[1.7] text-tsl30-mut text-pretty">A brand &amp; digital studio. The sidebar is one pane of frosted glass over a living aurora &mdash; blur, saturation and a light-catching hairline.</p>
  </main>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tsl30-ink: #f7f5fb;
  --color-tsl30-ink: oklch(0.97 0.005 300);
  --color-tsl30-mut: #ccc6d9;
  --color-tsl30-mut: oklch(0.86 0.02 300);
  --color-tsl30-onaccent: #24203a;
  --color-tsl30-onaccent: oklch(0.2 0.04 300);
  --font-tsl30-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --animate-tsl30-drift: tsl30-drift 24s ease-in-out infinite alternate;
}

@keyframes tsl30-drift {
  from {
    transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1);
  }

  to {
    transform: translate3d(3%, 2%, 0) rotate(4deg) scale(1.08);
  }
}

.tsl-30 {
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  color-scheme: dark;
}
/* The lit-glass hairline again (see demo 16): two background layers with
   different clip boxes, the one thing with no utility path. */

.tsl-30-glass {
  background: linear-gradient(rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.08)) padding-box, linear-gradient(155deg, rgb(255 255 255 / 0.6), rgb(255 255 255 / 0.15) 35%, rgb(255 255 255 / 0.04)) border-box;
  -webkit-backdrop-filter: blur(22px) saturate(1.8);
}
```

How this works

This is demo 16's physics turned up and art-directed. The glass, the hairline and the sheen are the same three ideas at higher intensity; what is new is the moving ground, which is what makes the frost legible as a material rather than a filter.

Readability is the discipline that makes it shippable. Nav text is full-opacity at 14.5px, the active pill puts a solid-ish fill behind the text rather than trusting the frost, and every focusable keeps a white 2px ring. Glassmorphism fails accessibility only where text sits on unguarded frost — this demo is a map of where to put the guards.

Make it yours

  • Aurora palette: shift all three radial hues together, staying within about 120° of each other, to re-mood the scene.
  • Drift speed: 24s is ambient; under 10s becomes distraction.
  • Warm the glass for evening mode: bg-[color-mix(in_oklab,gold_6%,rgb(255_255_255/0.1))].

Gotchas — read before shipping

  • Layered backdrop filters multiply GPU cost. One glass surface over an animated ground is the budget; five glass cards will stutter on integrated graphics.
  • Animate the ground with transform, never background-position, or it leaves the compositor.
  • Keep the aurora behind everything and pointer-events-free, or it blocks text selection.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

backdrop-filter is Baseline (Safari prefixed, which Tailwind emits); the reduced-motion and no-backdrop-filter paths both degrade gracefully.

Techniques used in this demo

Utilitiesfirst-class utility or variant

backdrop-filtertw ↗radial-gradient()tw ↗conic-gradient()tw ↗prefers-reduced-motiontw ↗

Plain CSSno Tailwind surface

@keyframestw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →