30 Tailwind CSS Sidebar Layouts
11 / 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 Right-Aligned Sidebar Layout for Inspector Panels

The design-tool inspector: a right-hand properties panel tuned for its real job — dense labelled controls, hairline dividers, and logical-property borders so an RTL locale flips the whole layout for free. The canvas stays first in the DOM, which is what screen readers and the tab order want.

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-11 w-full h-svh min-h-svh grid grid-cols-[1fr_300px] font-tsl11-sans bg-tsl11-bg text-tsl11-ink">
  <main aria-label="Canvas" class="grid place-items-center overflow-auto bg-[radial-gradient(var(--color-tsl11-grid)_1px,transparent_1px)] bg-[length:22px_22px]">
    <div class="grid gap-2.5 justify-items-center font-tsl11-mono text-xs font-medium text-tsl11-mut">
      <div aria-hidden="true" class="w-[320px] h-[180px] rounded-2xl bg-[linear-gradient(135deg,oklch(0.62_0.17_285),oklch(0.55_0.19_320))] outline outline-[1.5px] outline-tsl11-accent outline-offset-4"></div>
      <span>hero-card</span>
    </div>
  </main>
  <aside aria-label="Properties" class="border-s border-tsl11-line bg-tsl11-panel overflow-y-auto px-4 py-[18px] [scrollbar-gutter:stable]">
    <h2 class="pb-4 border-b border-tsl11-line text-sm font-semibold">Design</h2>
    <div class="grid gap-2.5 py-4 border-b border-tsl11-line">
      <h3 class="text-[10.5px] font-semibold uppercase tracking-[0.09em] text-tsl11-mut">Layout</h3>
      <div class="grid grid-cols-[auto_1fr_auto_1fr] items-center gap-2">
        <label for="tsl11-w" class="text-[11.5px] font-medium text-tsl11-mut">W</label><input id="tsl11-w" type="number" value="320" class="min-w-0 w-full min-h-9 px-2.5 rounded-lg border border-tsl11-line bg-tsl11-field text-tsl11-ink font-tsl11-mono text-[12.5px] font-medium tabular-nums focus-visible:outline-2 focus-visible:outline-tsl11-accent focus-visible:outline-offset-1">
        <label for="tsl11-h" class="text-[11.5px] font-medium text-tsl11-mut">H</label><input id="tsl11-h" type="number" value="180" class="min-w-0 w-full min-h-9 px-2.5 rounded-lg border border-tsl11-line bg-tsl11-field text-tsl11-ink font-tsl11-mono text-[12.5px] font-medium tabular-nums focus-visible:outline-2 focus-visible:outline-tsl11-accent focus-visible:outline-offset-1">
      </div>
      <div class="grid grid-cols-[auto_1fr_auto_1fr] items-center gap-2">
        <label for="tsl11-x" class="text-[11.5px] font-medium text-tsl11-mut">X</label><input id="tsl11-x" type="number" value="64" class="min-w-0 w-full min-h-9 px-2.5 rounded-lg border border-tsl11-line bg-tsl11-field text-tsl11-ink font-tsl11-mono text-[12.5px] font-medium tabular-nums focus-visible:outline-2 focus-visible:outline-tsl11-accent focus-visible:outline-offset-1">
        <label for="tsl11-y" class="text-[11.5px] font-medium text-tsl11-mut">Y</label><input id="tsl11-y" type="number" value="42" class="min-w-0 w-full min-h-9 px-2.5 rounded-lg border border-tsl11-line bg-tsl11-field text-tsl11-ink font-tsl11-mono text-[12.5px] font-medium tabular-nums focus-visible:outline-2 focus-visible:outline-tsl11-accent focus-visible:outline-offset-1">
      </div>
    </div>
    <div class="grid gap-2.5 py-4 border-b border-tsl11-line">
      <h3 class="text-[10.5px] font-semibold uppercase tracking-[0.09em] text-tsl11-mut">Appearance</h3>
      <div class="grid grid-cols-[auto_1fr_auto_1fr] items-center gap-2">
        <label for="tsl11-r" class="text-[11.5px] font-medium text-tsl11-mut">Radius</label><input id="tsl11-r" type="number" value="16" class="min-w-0 w-full min-h-9 px-2.5 rounded-lg border border-tsl11-line bg-tsl11-field text-tsl11-ink font-tsl11-mono text-[12.5px] font-medium tabular-nums focus-visible:outline-2 focus-visible:outline-tsl11-accent focus-visible:outline-offset-1">
        <label for="tsl11-o" class="text-[11.5px] font-medium text-tsl11-mut">Opacity</label><input id="tsl11-o" type="number" value="100" class="min-w-0 w-full min-h-9 px-2.5 rounded-lg border border-tsl11-line bg-tsl11-field text-tsl11-ink font-tsl11-mono text-[12.5px] font-medium tabular-nums focus-visible:outline-2 focus-visible:outline-tsl11-accent focus-visible:outline-offset-1">
      </div>
      <div class="grid grid-cols-[auto_auto_1fr] items-center gap-2">
        <label for="tsl11-f" class="text-[11.5px] font-medium text-tsl11-mut">Fill</label>
        <input id="tsl11-f" type="color" value="#7c6ff0" class="w-11 h-11 p-0.5 rounded-lg border border-tsl11-line bg-transparent cursor-pointer focus-visible:outline-2 focus-visible:outline-tsl11-accent focus-visible:outline-offset-1">
        <code class="font-tsl11-mono text-xs font-medium text-tsl11-mut">#7C6FF0</code>
      </div>
    </div>
    <div class="grid gap-2.5 py-4">
      <h3 class="text-[10.5px] font-semibold uppercase tracking-[0.09em] text-tsl11-mut">Export</h3>
      <button type="button" class="min-h-11 px-3 rounded-[9px] border border-tsl11-accentline bg-tsl11-accenttint text-tsl11-ink text-[12.5px] font-semibold cursor-pointer transition-colors duration-200 hover:bg-tsl11-accenthover focus-visible:outline-2 focus-visible:outline-tsl11-accent focus-visible:outline-offset-1">Export PNG &middot;2x</button>
    </div>
  </aside>
</section>
@import "tailwindcss";

@theme {
  --color-tsl11-bg: #16171c;
  --color-tsl11-bg: oklch(0.15 0.01 280);
  --color-tsl11-panel: #1d1e25;
  --color-tsl11-panel: oklch(0.19 0.012 280);
  --color-tsl11-field: #18191f;
  --color-tsl11-field: oklch(0.16 0.01 280);
  --color-tsl11-grid: #222430;
  --color-tsl11-grid: oklch(0.22 0.012 280);
  --color-tsl11-ink: #e9e9ef;
  --color-tsl11-ink: oklch(0.93 0.005 280);
  --color-tsl11-mut: #8b8b99;
  --color-tsl11-mut: oklch(0.6 0.012 280);
  --color-tsl11-line: #393a46;
  --color-tsl11-line: oklch(0.29 0.015 280);
  --color-tsl11-accent: #8b74e8;
  --color-tsl11-accent: oklch(0.66 0.17 285);
  --color-tsl11-accentline: rgb(139 116 232 / 0.5);
  --color-tsl11-accentline: color-mix(in oklab, oklch(0.66 0.17 285) 50%, transparent);
  --color-tsl11-accenttint: rgb(139 116 232 / 0.16);
  --color-tsl11-accenttint: color-mix(in oklab, oklch(0.66 0.17 285) 16%, transparent);
  --color-tsl11-accenthover: rgb(139 116 232 / 0.26);
  --color-tsl11-accenthover: color-mix(in oklab, oklch(0.66 0.17 285) 26%, transparent);
  --font-tsl11-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-tsl11-mono: 'JetBrains Mono', ui-monospace, monospace;
}

.tsl-11 {
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  color-scheme: dark;
}

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-tsl11-bg: #16171c;
  --color-tsl11-bg: oklch(0.15 0.01 280);
  --color-tsl11-panel: #1d1e25;
  --color-tsl11-panel: oklch(0.19 0.012 280);
  --color-tsl11-field: #18191f;
  --color-tsl11-field: oklch(0.16 0.01 280);
  --color-tsl11-grid: #222430;
  --color-tsl11-grid: oklch(0.22 0.012 280);
  --color-tsl11-ink: #e9e9ef;
  --color-tsl11-ink: oklch(0.93 0.005 280);
  --color-tsl11-mut: #8b8b99;
  --color-tsl11-mut: oklch(0.6 0.012 280);
  --color-tsl11-line: #393a46;
  --color-tsl11-line: oklch(0.29 0.015 280);
  --color-tsl11-accent: #8b74e8;
  --color-tsl11-accent: oklch(0.66 0.17 285);
  --color-tsl11-accentline: rgb(139 116 232 / 0.5);
  --color-tsl11-accentline: color-mix(in oklab, oklch(0.66 0.17 285) 50%, transparent);
  --color-tsl11-accenttint: rgb(139 116 232 / 0.16);
  --color-tsl11-accenttint: color-mix(in oklab, oklch(0.66 0.17 285) 16%, transparent);
  --color-tsl11-accenthover: rgb(139 116 232 / 0.26);
  --color-tsl11-accenthover: color-mix(in oklab, oklch(0.66 0.17 285) 26%, transparent);
  --font-tsl11-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-tsl11-mono: 'JetBrains Mono', ui-monospace, monospace;
}

.tsl-11 {
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  color-scheme: dark;
}
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.

  • v4's logical-property defaults do real work here: writing border-s is no harder than border-l, so the RTL-correct version is the one you reach for by accident. That is a better outcome than the CSS original, where border-inline-start was a deliberate act of discipline.
  • The color-mix() button states became three @theme tokens rather than three arbitrary values, because the same accent appears at 16%, 26% and 50% — once a mix repeats, it is a token.
  • UI change from the CSS original: number inputs went to min-h-9, the colour swatch and export button to 44px, and the panel gained scrollbar-gutter:stable so dense rows do not reflow when the scrollbar appears.
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 Right-Aligned Sidebar Layout for Inspector Panels
Source: https://codefronts.com/layouts/tailwind-css-sidebar-layouts/tailwind-right-aligned-sidebar-inspector-panel/

The design-tool inspector: a right-hand properties panel tuned for its real job &mdash; dense labelled controls, hairline dividers, and logical-property borders so an RTL locale flips the whole layout for free. The canvas stays first in the DOM, which is what screen readers and the tab order want.
## HTML
```html
<section class="tsl-11 w-full h-svh min-h-svh grid grid-cols-[1fr_300px] font-tsl11-sans bg-tsl11-bg text-tsl11-ink">
  <main aria-label="Canvas" class="grid place-items-center overflow-auto bg-[radial-gradient(var(--color-tsl11-grid)_1px,transparent_1px)] bg-[length:22px_22px]">
    <div class="grid gap-2.5 justify-items-center font-tsl11-mono text-xs font-medium text-tsl11-mut">
      <div aria-hidden="true" class="w-[320px] h-[180px] rounded-2xl bg-[linear-gradient(135deg,oklch(0.62_0.17_285),oklch(0.55_0.19_320))] outline outline-[1.5px] outline-tsl11-accent outline-offset-4"></div>
      <span>hero-card</span>
    </div>
  </main>
  <aside aria-label="Properties" class="border-s border-tsl11-line bg-tsl11-panel overflow-y-auto px-4 py-[18px] [scrollbar-gutter:stable]">
    <h2 class="pb-4 border-b border-tsl11-line text-sm font-semibold">Design</h2>
    <div class="grid gap-2.5 py-4 border-b border-tsl11-line">
      <h3 class="text-[10.5px] font-semibold uppercase tracking-[0.09em] text-tsl11-mut">Layout</h3>
      <div class="grid grid-cols-[auto_1fr_auto_1fr] items-center gap-2">
        <label for="tsl11-w" class="text-[11.5px] font-medium text-tsl11-mut">W</label><input id="tsl11-w" type="number" value="320" class="min-w-0 w-full min-h-9 px-2.5 rounded-lg border border-tsl11-line bg-tsl11-field text-tsl11-ink font-tsl11-mono text-[12.5px] font-medium tabular-nums focus-visible:outline-2 focus-visible:outline-tsl11-accent focus-visible:outline-offset-1">
        <label for="tsl11-h" class="text-[11.5px] font-medium text-tsl11-mut">H</label><input id="tsl11-h" type="number" value="180" class="min-w-0 w-full min-h-9 px-2.5 rounded-lg border border-tsl11-line bg-tsl11-field text-tsl11-ink font-tsl11-mono text-[12.5px] font-medium tabular-nums focus-visible:outline-2 focus-visible:outline-tsl11-accent focus-visible:outline-offset-1">
      </div>
      <div class="grid grid-cols-[auto_1fr_auto_1fr] items-center gap-2">
        <label for="tsl11-x" class="text-[11.5px] font-medium text-tsl11-mut">X</label><input id="tsl11-x" type="number" value="64" class="min-w-0 w-full min-h-9 px-2.5 rounded-lg border border-tsl11-line bg-tsl11-field text-tsl11-ink font-tsl11-mono text-[12.5px] font-medium tabular-nums focus-visible:outline-2 focus-visible:outline-tsl11-accent focus-visible:outline-offset-1">
        <label for="tsl11-y" class="text-[11.5px] font-medium text-tsl11-mut">Y</label><input id="tsl11-y" type="number" value="42" class="min-w-0 w-full min-h-9 px-2.5 rounded-lg border border-tsl11-line bg-tsl11-field text-tsl11-ink font-tsl11-mono text-[12.5px] font-medium tabular-nums focus-visible:outline-2 focus-visible:outline-tsl11-accent focus-visible:outline-offset-1">
      </div>
    </div>
    <div class="grid gap-2.5 py-4 border-b border-tsl11-line">
      <h3 class="text-[10.5px] font-semibold uppercase tracking-[0.09em] text-tsl11-mut">Appearance</h3>
      <div class="grid grid-cols-[auto_1fr_auto_1fr] items-center gap-2">
        <label for="tsl11-r" class="text-[11.5px] font-medium text-tsl11-mut">Radius</label><input id="tsl11-r" type="number" value="16" class="min-w-0 w-full min-h-9 px-2.5 rounded-lg border border-tsl11-line bg-tsl11-field text-tsl11-ink font-tsl11-mono text-[12.5px] font-medium tabular-nums focus-visible:outline-2 focus-visible:outline-tsl11-accent focus-visible:outline-offset-1">
        <label for="tsl11-o" class="text-[11.5px] font-medium text-tsl11-mut">Opacity</label><input id="tsl11-o" type="number" value="100" class="min-w-0 w-full min-h-9 px-2.5 rounded-lg border border-tsl11-line bg-tsl11-field text-tsl11-ink font-tsl11-mono text-[12.5px] font-medium tabular-nums focus-visible:outline-2 focus-visible:outline-tsl11-accent focus-visible:outline-offset-1">
      </div>
      <div class="grid grid-cols-[auto_auto_1fr] items-center gap-2">
        <label for="tsl11-f" class="text-[11.5px] font-medium text-tsl11-mut">Fill</label>
        <input id="tsl11-f" type="color" value="#7c6ff0" class="w-11 h-11 p-0.5 rounded-lg border border-tsl11-line bg-transparent cursor-pointer focus-visible:outline-2 focus-visible:outline-tsl11-accent focus-visible:outline-offset-1">
        <code class="font-tsl11-mono text-xs font-medium text-tsl11-mut">#7C6FF0</code>
      </div>
    </div>
    <div class="grid gap-2.5 py-4">
      <h3 class="text-[10.5px] font-semibold uppercase tracking-[0.09em] text-tsl11-mut">Export</h3>
      <button type="button" class="min-h-11 px-3 rounded-[9px] border border-tsl11-accentline bg-tsl11-accenttint text-tsl11-ink text-[12.5px] font-semibold cursor-pointer transition-colors duration-200 hover:bg-tsl11-accenthover focus-visible:outline-2 focus-visible:outline-tsl11-accent focus-visible:outline-offset-1">Export PNG &middot;2x</button>
    </div>
  </aside>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tsl11-bg: #16171c;
  --color-tsl11-bg: oklch(0.15 0.01 280);
  --color-tsl11-panel: #1d1e25;
  --color-tsl11-panel: oklch(0.19 0.012 280);
  --color-tsl11-field: #18191f;
  --color-tsl11-field: oklch(0.16 0.01 280);
  --color-tsl11-grid: #222430;
  --color-tsl11-grid: oklch(0.22 0.012 280);
  --color-tsl11-ink: #e9e9ef;
  --color-tsl11-ink: oklch(0.93 0.005 280);
  --color-tsl11-mut: #8b8b99;
  --color-tsl11-mut: oklch(0.6 0.012 280);
  --color-tsl11-line: #393a46;
  --color-tsl11-line: oklch(0.29 0.015 280);
  --color-tsl11-accent: #8b74e8;
  --color-tsl11-accent: oklch(0.66 0.17 285);
  --color-tsl11-accentline: rgb(139 116 232 / 0.5);
  --color-tsl11-accentline: color-mix(in oklab, oklch(0.66 0.17 285) 50%, transparent);
  --color-tsl11-accenttint: rgb(139 116 232 / 0.16);
  --color-tsl11-accenttint: color-mix(in oklab, oklch(0.66 0.17 285) 16%, transparent);
  --color-tsl11-accenthover: rgb(139 116 232 / 0.26);
  --color-tsl11-accenthover: color-mix(in oklab, oklch(0.66 0.17 285) 26%, transparent);
  --font-tsl11-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-tsl11-mono: 'JetBrains Mono', ui-monospace, monospace;
}

.tsl-11 {
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  color-scheme: dark;
}
```

How this works

Right-hand panels are where physical properties bite hardest, because 'right' is a rendering detail, not a semantic one. The port makes the correct choice the easy one: border-s, ps-* and pe-* are the ordinary v4 spellings, so a locale switching to direction:rtl moves the panel to the left edge with its hairline on the correct side and no extra CSS.

Density is the genre's craft. 10.5px uppercase group labels, two-column label/input rows on a shared grid, native colour swatches, dividers instead of boxes. Inspectors live or die by vertical economy — but the interactive targets here are still 44px, which the original traded away.

Make it yours

  • 300px suits property panels; design tools run 240–320px. Under 240px, stack the label/input rows.
  • Make it collapsible with demo 02's pattern mirrored: has-checked:grid-cols-[1fr_0px].
  • Read-only detail panels (a CRM record preview) swap inputs for dl/dt/dd on the same grid.

Gotchas — read before shipping

  • Keep the canvas FIRST in source order — panel-first DOM makes screen readers announce settings before content.
  • Audit for any physical left/right utility in a panel; one border-l is all it takes to break RTL.
  • min-w-0 on number inputs inside grid cells, or Chrome's intrinsic width blows the column out.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Nothing is gated beyond Tailwind v4's own floor — logical properties and the grid shell are long-universal. The most portable demo alongside 04.

Techniques used in this demo

Utilitiesfirst-class utility or variant

color-mix()tw ↗radial-gradient()tw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →