30 Tailwind CSS Sidebar Layouts
21 / 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 Sidebar with Sticky Search Bar Inside the Rail

The command-centre rail: a search field pinned above a long scrolling menu — sticky inside the sidebar's own scroll context, not the page's — with a ⌘K keycap chip and focus-within ring-lighting the entire field when the input takes focus.

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-21 w-full h-svh min-h-svh grid grid-cols-[264px_1fr] font-tsl21-sans bg-tsl21-bg text-tsl21-ink">
  <aside aria-label="Channels" class="bg-tsl21-panel border-r border-tsl21-line overflow-y-auto overscroll-contain">
    <div class="sticky top-0 z-[2] px-3 pt-3.5 pb-2.5 bg-tsl21-panel border-b border-tsl21-line">
      <label class="grid grid-cols-[auto_1fr_auto] items-center gap-2.5 h-11 px-3 rounded-[11px] border border-tsl21-line bg-tsl21-field transition-[border-color,box-shadow] duration-200 focus-within:border-tsl21-accent focus-within:shadow-[0_0_0_3px_var(--color-tsl21-ring)] motion-reduce:transition-none">
        <svg viewBox="0 0 24 24" aria-hidden="true" class="w-4 h-4 fill-none stroke-tsl21-mut stroke-2 [stroke-linecap:round]"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
        <input type="search" placeholder="Jump to&hellip;" aria-label="Search channels" class="min-w-0 border-0 bg-transparent text-tsl21-ink text-[13.5px] outline-none placeholder:text-tsl21-placeholder">
        <kbd class="font-tsl21-mono text-[10.5px] font-semibold px-[5px] py-[3px] rounded-[5px] border border-tsl21-line bg-tsl21-chip text-tsl21-mut">&#8984;K</kbd>
      </label>
    </div>
    <nav class="flex flex-col gap-px px-3 pt-2.5 pb-4">
      <a href="#" aria-current="page" class="flex items-center min-h-11 px-3 rounded-[9px] text-[13.5px] font-medium text-tsl21-mut no-underline transition-colors duration-150 hover:text-tsl21-ink hover:bg-tsl21-hover aria-[current=page]:text-tsl21-ink aria-[current=page]:bg-tsl21-tint focus-visible:outline-2 focus-visible:outline-tsl21-accent focus-visible:outline-offset-1"># general</a>
      <a href="#" class="flex items-center min-h-11 px-3 rounded-[9px] text-[13.5px] font-medium text-tsl21-mut no-underline transition-colors duration-150 hover:text-tsl21-ink hover:bg-tsl21-hover focus-visible:outline-2 focus-visible:outline-tsl21-accent focus-visible:outline-offset-1"># announcements</a>
      <a href="#" class="flex items-center min-h-11 px-3 rounded-[9px] text-[13.5px] font-medium text-tsl21-mut no-underline transition-colors duration-150 hover:text-tsl21-ink hover:bg-tsl21-hover focus-visible:outline-2 focus-visible:outline-tsl21-accent focus-visible:outline-offset-1"># engineering</a>
      <a href="#" class="flex items-center min-h-11 px-3 rounded-[9px] text-[13.5px] font-medium text-tsl21-mut no-underline transition-colors duration-150 hover:text-tsl21-ink hover:bg-tsl21-hover focus-visible:outline-2 focus-visible:outline-tsl21-accent focus-visible:outline-offset-1"># design-systems</a>
      <a href="#" class="flex items-center min-h-11 px-3 rounded-[9px] text-[13.5px] font-medium text-tsl21-mut no-underline transition-colors duration-150 hover:text-tsl21-ink hover:bg-tsl21-hover focus-visible:outline-2 focus-visible:outline-tsl21-accent focus-visible:outline-offset-1"># frontend-guild</a>
      <a href="#" class="flex items-center min-h-11 px-3 rounded-[9px] text-[13.5px] font-medium text-tsl21-mut no-underline transition-colors duration-150 hover:text-tsl21-ink hover:bg-tsl21-hover focus-visible:outline-2 focus-visible:outline-tsl21-accent focus-visible:outline-offset-1"># css-wizardry</a>
      <a href="#" class="flex items-center min-h-11 px-3 rounded-[9px] text-[13.5px] font-medium text-tsl21-mut no-underline transition-colors duration-150 hover:text-tsl21-ink hover:bg-tsl21-hover focus-visible:outline-2 focus-visible:outline-tsl21-accent focus-visible:outline-offset-1"># accessibility</a>
      <a href="#" class="flex items-center min-h-11 px-3 rounded-[9px] text-[13.5px] font-medium text-tsl21-mut no-underline transition-colors duration-150 hover:text-tsl21-ink hover:bg-tsl21-hover focus-visible:outline-2 focus-visible:outline-tsl21-accent focus-visible:outline-offset-1"># performance</a>
      <a href="#" class="flex items-center min-h-11 px-3 rounded-[9px] text-[13.5px] font-medium text-tsl21-mut no-underline transition-colors duration-150 hover:text-tsl21-ink hover:bg-tsl21-hover focus-visible:outline-2 focus-visible:outline-tsl21-accent focus-visible:outline-offset-1"># releases</a>
      <a href="#" class="flex items-center min-h-11 px-3 rounded-[9px] text-[13.5px] font-medium text-tsl21-mut no-underline transition-colors duration-150 hover:text-tsl21-ink hover:bg-tsl21-hover focus-visible:outline-2 focus-visible:outline-tsl21-accent focus-visible:outline-offset-1"># random</a>
      <a href="#" class="flex items-center min-h-11 px-3 rounded-[9px] text-[13.5px] font-medium text-tsl21-mut no-underline transition-colors duration-150 hover:text-tsl21-ink hover:bg-tsl21-hover focus-visible:outline-2 focus-visible:outline-tsl21-accent focus-visible:outline-offset-1"># watercooler</a>
      <a href="#" class="flex items-center min-h-11 px-3 rounded-[9px] text-[13.5px] font-medium text-tsl21-mut no-underline transition-colors duration-150 hover:text-tsl21-ink hover:bg-tsl21-hover focus-visible:outline-2 focus-visible:outline-tsl21-accent focus-visible:outline-offset-1"># reading-club</a>
    </nav>
  </aside>
  <main class="p-8 overflow-y-auto [scrollbar-gutter:stable]">
    <h1 class="text-[22px] font-semibold leading-tight mb-2.5"># general</h1>
    <p class="max-w-[47ch] text-sm leading-relaxed text-tsl21-mut text-pretty">Scroll the channel list &mdash; the search stays pinned inside the rail's own scroll context, and channels slide beneath it.</p>
  </main>
</section>
@import "tailwindcss";

@theme {
  --color-tsl21-bg: #161219;
  --color-tsl21-bg: oklch(0.13 0.015 310);
  --color-tsl21-panel: #1e1822;
  --color-tsl21-panel: oklch(0.17 0.02 310);
  --color-tsl21-field: #181320;
  --color-tsl21-field: oklch(0.14 0.016 310);
  --color-tsl21-chip: rgb(239 234 243 / 0.08);
  --color-tsl21-chip: color-mix(in oklab, oklch(0.94 0.005 310) 8%, transparent);
  --color-tsl21-ink: #efeaf3;
  --color-tsl21-ink: oklch(0.94 0.005 310);
  --color-tsl21-mut: #a0949f;
  --color-tsl21-mut: oklch(0.64 0.014 310);
  --color-tsl21-placeholder: #857a86;
  --color-tsl21-placeholder: oklch(0.56 0.014 310);
  --color-tsl21-line: #3b3441;
  --color-tsl21-line: oklch(0.28 0.02 310);
  --color-tsl21-accent: #c07ae0;
  --color-tsl21-accent: oklch(0.72 0.15 310);
  --color-tsl21-ring: rgb(192 122 224 / 0.22);
  --color-tsl21-ring: color-mix(in oklab, oklch(0.72 0.15 310) 22%, transparent);
  --color-tsl21-hover: rgb(239 234 243 / 0.06);
  --color-tsl21-hover: color-mix(in oklab, oklch(0.94 0.005 310) 6%, transparent);
  --color-tsl21-tint: rgb(192 122 224 / 0.16);
  --color-tsl21-tint: color-mix(in oklab, oklch(0.72 0.15 310) 16%, transparent);
  --font-tsl21-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-tsl21-mono: 'JetBrains Mono', ui-monospace, monospace;
}

.tsl-21 {
  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-tsl21-bg: #161219;
  --color-tsl21-bg: oklch(0.13 0.015 310);
  --color-tsl21-panel: #1e1822;
  --color-tsl21-panel: oklch(0.17 0.02 310);
  --color-tsl21-field: #181320;
  --color-tsl21-field: oklch(0.14 0.016 310);
  --color-tsl21-chip: rgb(239 234 243 / 0.08);
  --color-tsl21-chip: color-mix(in oklab, oklch(0.94 0.005 310) 8%, transparent);
  --color-tsl21-ink: #efeaf3;
  --color-tsl21-ink: oklch(0.94 0.005 310);
  --color-tsl21-mut: #a0949f;
  --color-tsl21-mut: oklch(0.64 0.014 310);
  --color-tsl21-placeholder: #857a86;
  --color-tsl21-placeholder: oklch(0.56 0.014 310);
  --color-tsl21-line: #3b3441;
  --color-tsl21-line: oklch(0.28 0.02 310);
  --color-tsl21-accent: #c07ae0;
  --color-tsl21-accent: oklch(0.72 0.15 310);
  --color-tsl21-ring: rgb(192 122 224 / 0.22);
  --color-tsl21-ring: color-mix(in oklab, oklch(0.72 0.15 310) 22%, transparent);
  --color-tsl21-hover: rgb(239 234 243 / 0.06);
  --color-tsl21-hover: color-mix(in oklab, oklch(0.94 0.005 310) 6%, transparent);
  --color-tsl21-tint: rgb(192 122 224 / 0.16);
  --color-tsl21-tint: color-mix(in oklab, oklch(0.72 0.15 310) 16%, transparent);
  --font-tsl21-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-tsl21-mono: 'JetBrains Mono', ui-monospace, monospace;
}

.tsl-21 {
  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.

  • The focus ring is a @theme token rather than an inline color-mix(), because a shadow's comma syntax and color-mix()'s commas do not coexist comfortably inside an arbitrary value. Pre-mixing is both shorter and readable.
  • UI change from the CSS original: the search field grew from 40px to 44px, channel rows to min-h-11, and the placeholder got a dedicated token — the original's color-mix(…75%,transparent) placeholder was under 3:1 against the field.
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 Sidebar with Sticky Search Bar Inside the Rail
Source: https://codefronts.com/layouts/tailwind-css-sidebar-layouts/tailwind-sidebar-sticky-search-bar-rail/

The command-centre rail: a search field pinned above a long scrolling menu &mdash; sticky inside the sidebar's own scroll context, not the page's &mdash; with a &#8984;K keycap chip and focus-within ring-lighting the entire field when the input takes focus.
## HTML
```html
<section class="tsl-21 w-full h-svh min-h-svh grid grid-cols-[264px_1fr] font-tsl21-sans bg-tsl21-bg text-tsl21-ink">
  <aside aria-label="Channels" class="bg-tsl21-panel border-r border-tsl21-line overflow-y-auto overscroll-contain">
    <div class="sticky top-0 z-[2] px-3 pt-3.5 pb-2.5 bg-tsl21-panel border-b border-tsl21-line">
      <label class="grid grid-cols-[auto_1fr_auto] items-center gap-2.5 h-11 px-3 rounded-[11px] border border-tsl21-line bg-tsl21-field transition-[border-color,box-shadow] duration-200 focus-within:border-tsl21-accent focus-within:shadow-[0_0_0_3px_var(--color-tsl21-ring)] motion-reduce:transition-none">
        <svg viewBox="0 0 24 24" aria-hidden="true" class="w-4 h-4 fill-none stroke-tsl21-mut stroke-2 [stroke-linecap:round]"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
        <input type="search" placeholder="Jump to&hellip;" aria-label="Search channels" class="min-w-0 border-0 bg-transparent text-tsl21-ink text-[13.5px] outline-none placeholder:text-tsl21-placeholder">
        <kbd class="font-tsl21-mono text-[10.5px] font-semibold px-[5px] py-[3px] rounded-[5px] border border-tsl21-line bg-tsl21-chip text-tsl21-mut">&#8984;K</kbd>
      </label>
    </div>
    <nav class="flex flex-col gap-px px-3 pt-2.5 pb-4">
      <a href="#" aria-current="page" class="flex items-center min-h-11 px-3 rounded-[9px] text-[13.5px] font-medium text-tsl21-mut no-underline transition-colors duration-150 hover:text-tsl21-ink hover:bg-tsl21-hover aria-[current=page]:text-tsl21-ink aria-[current=page]:bg-tsl21-tint focus-visible:outline-2 focus-visible:outline-tsl21-accent focus-visible:outline-offset-1"># general</a>
      <a href="#" class="flex items-center min-h-11 px-3 rounded-[9px] text-[13.5px] font-medium text-tsl21-mut no-underline transition-colors duration-150 hover:text-tsl21-ink hover:bg-tsl21-hover focus-visible:outline-2 focus-visible:outline-tsl21-accent focus-visible:outline-offset-1"># announcements</a>
      <a href="#" class="flex items-center min-h-11 px-3 rounded-[9px] text-[13.5px] font-medium text-tsl21-mut no-underline transition-colors duration-150 hover:text-tsl21-ink hover:bg-tsl21-hover focus-visible:outline-2 focus-visible:outline-tsl21-accent focus-visible:outline-offset-1"># engineering</a>
      <a href="#" class="flex items-center min-h-11 px-3 rounded-[9px] text-[13.5px] font-medium text-tsl21-mut no-underline transition-colors duration-150 hover:text-tsl21-ink hover:bg-tsl21-hover focus-visible:outline-2 focus-visible:outline-tsl21-accent focus-visible:outline-offset-1"># design-systems</a>
      <a href="#" class="flex items-center min-h-11 px-3 rounded-[9px] text-[13.5px] font-medium text-tsl21-mut no-underline transition-colors duration-150 hover:text-tsl21-ink hover:bg-tsl21-hover focus-visible:outline-2 focus-visible:outline-tsl21-accent focus-visible:outline-offset-1"># frontend-guild</a>
      <a href="#" class="flex items-center min-h-11 px-3 rounded-[9px] text-[13.5px] font-medium text-tsl21-mut no-underline transition-colors duration-150 hover:text-tsl21-ink hover:bg-tsl21-hover focus-visible:outline-2 focus-visible:outline-tsl21-accent focus-visible:outline-offset-1"># css-wizardry</a>
      <a href="#" class="flex items-center min-h-11 px-3 rounded-[9px] text-[13.5px] font-medium text-tsl21-mut no-underline transition-colors duration-150 hover:text-tsl21-ink hover:bg-tsl21-hover focus-visible:outline-2 focus-visible:outline-tsl21-accent focus-visible:outline-offset-1"># accessibility</a>
      <a href="#" class="flex items-center min-h-11 px-3 rounded-[9px] text-[13.5px] font-medium text-tsl21-mut no-underline transition-colors duration-150 hover:text-tsl21-ink hover:bg-tsl21-hover focus-visible:outline-2 focus-visible:outline-tsl21-accent focus-visible:outline-offset-1"># performance</a>
      <a href="#" class="flex items-center min-h-11 px-3 rounded-[9px] text-[13.5px] font-medium text-tsl21-mut no-underline transition-colors duration-150 hover:text-tsl21-ink hover:bg-tsl21-hover focus-visible:outline-2 focus-visible:outline-tsl21-accent focus-visible:outline-offset-1"># releases</a>
      <a href="#" class="flex items-center min-h-11 px-3 rounded-[9px] text-[13.5px] font-medium text-tsl21-mut no-underline transition-colors duration-150 hover:text-tsl21-ink hover:bg-tsl21-hover focus-visible:outline-2 focus-visible:outline-tsl21-accent focus-visible:outline-offset-1"># random</a>
      <a href="#" class="flex items-center min-h-11 px-3 rounded-[9px] text-[13.5px] font-medium text-tsl21-mut no-underline transition-colors duration-150 hover:text-tsl21-ink hover:bg-tsl21-hover focus-visible:outline-2 focus-visible:outline-tsl21-accent focus-visible:outline-offset-1"># watercooler</a>
      <a href="#" class="flex items-center min-h-11 px-3 rounded-[9px] text-[13.5px] font-medium text-tsl21-mut no-underline transition-colors duration-150 hover:text-tsl21-ink hover:bg-tsl21-hover focus-visible:outline-2 focus-visible:outline-tsl21-accent focus-visible:outline-offset-1"># reading-club</a>
    </nav>
  </aside>
  <main class="p-8 overflow-y-auto [scrollbar-gutter:stable]">
    <h1 class="text-[22px] font-semibold leading-tight mb-2.5"># general</h1>
    <p class="max-w-[47ch] text-sm leading-relaxed text-tsl21-mut text-pretty">Scroll the channel list &mdash; the search stays pinned inside the rail's own scroll context, and channels slide beneath it.</p>
  </main>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tsl21-bg: #161219;
  --color-tsl21-bg: oklch(0.13 0.015 310);
  --color-tsl21-panel: #1e1822;
  --color-tsl21-panel: oklch(0.17 0.02 310);
  --color-tsl21-field: #181320;
  --color-tsl21-field: oklch(0.14 0.016 310);
  --color-tsl21-chip: rgb(239 234 243 / 0.08);
  --color-tsl21-chip: color-mix(in oklab, oklch(0.94 0.005 310) 8%, transparent);
  --color-tsl21-ink: #efeaf3;
  --color-tsl21-ink: oklch(0.94 0.005 310);
  --color-tsl21-mut: #a0949f;
  --color-tsl21-mut: oklch(0.64 0.014 310);
  --color-tsl21-placeholder: #857a86;
  --color-tsl21-placeholder: oklch(0.56 0.014 310);
  --color-tsl21-line: #3b3441;
  --color-tsl21-line: oklch(0.28 0.02 310);
  --color-tsl21-accent: #c07ae0;
  --color-tsl21-accent: oklch(0.72 0.15 310);
  --color-tsl21-ring: rgb(192 122 224 / 0.22);
  --color-tsl21-ring: color-mix(in oklab, oklch(0.72 0.15 310) 22%, transparent);
  --color-tsl21-hover: rgb(239 234 243 / 0.06);
  --color-tsl21-hover: color-mix(in oklab, oklch(0.94 0.005 310) 6%, transparent);
  --color-tsl21-tint: rgb(192 122 224 / 0.16);
  --color-tsl21-tint: color-mix(in oklab, oklch(0.72 0.15 310) 16%, transparent);
  --font-tsl21-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-tsl21-mono: 'JetBrains Mono', ui-monospace, monospace;
}

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

How this works

Sticky-in-a-pane is the underused variant. position:sticky resolves against the nearest scrolling ancestor; because the rail carries overflow-y-auto, the search belongs to the rail's scroll context and page scrolling cannot affect it. Nothing about the utility differs from page-level sticky — only where you put the scroller.

focus-within: is the polish. The input itself has no border; the wrapper does, and it reacts to focus anywhere inside. One variant produces the 'the whole control is active' affordance that otherwise needs a JS focus handler.

Make it yours

  • Wire the real &#8984;K in three lines (keydown → input.focus()); the chip is honest UI either way.
  • Workspace switcher above the search? Move the offset to top-[52px].
  • Recent searches: attach demo 10's popover to the field wrapper.

Gotchas — read before shipping

  • The SIDEBAR must be the scroller. If a parent scrolls instead, the search sticks to the wrong context — check the scroll badges in devtools.
  • Give the sticky block an opaque background; a transparent sticky header shows rows sliding through it.
  • Do not hijack &#8984;K or / globally without checking the event target is not already an input.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Sticky-in-pane and :focus-within are long Baseline; the floor is Tailwind v4's own generated sheet.

Techniques used in this demo

Utilitiesfirst-class utility or variant

:focus-withintw ↗color-mix()tw ↗box-shadowtw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →