17 Tailwind CSS Dashboard Layouts
08 / 17

All 17 in 17 Tailwind CSS Dashboard Layouts

  1. 01Tailwind CSS Bento Grid Dashboard Layout
  2. 02Tailwind CSS Collapsible Sidebar Admin Dashboard
  3. 03Tailwind CSS Dashboard KPI Stat Cards Grid
  4. 04Tailwind CSS Master-Detail Split View Inbox Layout
  5. 05Tailwind CSS Fixed Header Dashboard with Independent Scroll Panels
  6. 06Tailwind CSS Grid Template Areas Dashboard Layout
  7. 07Tailwind CSS Responsive Off-Canvas Sidebar Drawer Dashboard
  8. 08Tailwind CSS Container Query Responsive Dashboard Cards
  9. 09Tailwind CSS E-commerce Admin Dashboard with Bulk Actions
  10. 10Tailwind CSS Dark Mode Dashboard with Light / Dark / System Toggle
  11. 11Tailwind CSS Multi-Level Nested Sidebar Navigation Layout
  12. 12Minimal Tailwind CSS Admin Dashboard Template (No JavaScript)
  13. 13Tailwind CSS AI Copilot Chat Sidebar Dashboard Layout
  14. 14Tailwind CSS Data Table with Sticky Header and Sticky First Column
  15. 15Tailwind CSS Masonry Grid Dashboard Layout (Columns vs Grid Dense)
  16. 16Tailwind CSS Full-Screen Analytics Dashboard (100vh, No Scroll)
  17. 17Tailwind CSS Top Navigation Bar Dashboard Layout with Tabs
Pure TailwindMIT licensed

Tailwind CSS Container Query Responsive Dashboard Cards

The same widget markup in three slots — a narrow card, a medium card and one you drag — renders three layouts: stacked, value-beside-chart, and full analytics with a legend rail. In v4, container queries are built in: @container/w on the slot, @min-[21.25rem]/w: and @min-[32.5rem]/w: on the widget. A live badge on every card names the layout it is currently in.

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="tdl-08 w-full min-h-svh bg-tdl08-bg bg-linear-175 from-tdl08-bg to-tdl08-bg2 font-tdl08-sans text-tdl08-ink antialiased" aria-label="Container query widget demo">
  <div class="mx-auto grid min-h-svh w-full max-w-6xl content-center gap-5 p-4 sm:p-6">
    <div class="flex flex-wrap gap-4">
      <div class="@container/w grid min-w-0 flex-[0_0_16.25rem] content-start gap-2.25 max-sm:flex-auto">
        <p class="text-[10.5px] font-bold tracking-[0.09em] text-tdl08-mut uppercase">16.25rem slot</p>
        <div class="grid gap-3.5 rounded-2xl border border-tdl08-edge bg-tdl08-panel p-4.5 shadow-[0_10px_26px_-20px_var(--color-tdl08-shadow)] @min-[21.25rem]/w:grid-cols-[auto_minmax(0,1fr)] @min-[21.25rem]/w:items-end @min-[32.5rem]/w:grid-cols-[auto_minmax(0,1fr)_9rem]">
          <div class="@min-[21.25rem]/w:self-center @min-[21.25rem]/w:pr-2"><h3 class="flex items-center gap-2 text-[11px] font-semibold tracking-[0.11em] text-tdl08-mut uppercase">Bandwidth<span class="rounded-full bg-tdl08-c1/12 px-1.75 py-0.5 text-[9.5px] tracking-[0.06em] text-tdl08-c1"><span class="@min-[21.25rem]/w:hidden">Stacked</span><span class="hidden @min-[21.25rem]/w:inline @min-[32.5rem]/w:hidden">Split</span><span class="hidden @min-[32.5rem]/w:inline">Full</span></span></h3><p class="mt-1 mb-0.5 text-[clamp(26px,10cqi,42px)]/[1.1] font-bold tracking-[-0.02em] tabular-nums">4.6<small class="ml-0.5 text-[0.5em] font-semibold text-tdl08-mut">TB</small></p><span class="text-[11.5px] font-bold text-tdl08-good">▲ 18% this week</span></div>
          <div aria-hidden="true" class="flex h-16 min-w-0 items-end gap-1.5 *:h-(--h) *:flex-1 *:rounded-t-[4px] *:bg-linear-to-t *:from-tdl08-c1/30 *:to-tdl08-c1"><i style="--h:35%"></i><i style="--h:55%"></i><i style="--h:42%"></i><i style="--h:68%"></i><i style="--h:58%"></i><i style="--h:80%"></i><i style="--h:72%"></i><i style="--h:95%"></i></div>
          <div class="hidden content-center gap-2 @min-[32.5rem]/w:grid"><div aria-hidden="true" class="flex h-1.5 overflow-hidden rounded-full"><i class="w-[62%] bg-tdl08-c1"></i><i class="w-[27%] bg-tdl08-c2"></i><i class="w-[11%] bg-tdl08-c3"></i></div><ul class="grid gap-1.5 text-xs font-semibold text-tdl08-mut [&_i]:size-2.5 [&_i]:rounded-[3px] [&>li]:flex [&>li]:items-center [&>li]:gap-2"><li><i class="bg-tdl08-c1" aria-hidden="true"></i>CDN 62%</li><li><i class="bg-tdl08-c2" aria-hidden="true"></i>API 27%</li><li><i class="bg-tdl08-c3" aria-hidden="true"></i>Media 11%</li></ul></div>
        </div>
      </div>
      <div class="@container/w grid min-w-0 flex-[1_1_19rem] content-start gap-2.25">
        <p class="text-[10.5px] font-bold tracking-[0.09em] text-tdl08-mut uppercase">Fluid slot</p>
        <div class="grid gap-3.5 rounded-2xl border border-tdl08-edge bg-tdl08-panel p-4.5 shadow-[0_10px_26px_-20px_var(--color-tdl08-shadow)] @min-[21.25rem]/w:grid-cols-[auto_minmax(0,1fr)] @min-[21.25rem]/w:items-end @min-[32.5rem]/w:grid-cols-[auto_minmax(0,1fr)_9rem]">
          <div class="@min-[21.25rem]/w:self-center @min-[21.25rem]/w:pr-2"><h3 class="flex items-center gap-2 text-[11px] font-semibold tracking-[0.11em] text-tdl08-mut uppercase">Bandwidth<span class="rounded-full bg-tdl08-c1/12 px-1.75 py-0.5 text-[9.5px] tracking-[0.06em] text-tdl08-c1"><span class="@min-[21.25rem]/w:hidden">Stacked</span><span class="hidden @min-[21.25rem]/w:inline @min-[32.5rem]/w:hidden">Split</span><span class="hidden @min-[32.5rem]/w:inline">Full</span></span></h3><p class="mt-1 mb-0.5 text-[clamp(26px,10cqi,42px)]/[1.1] font-bold tracking-[-0.02em] tabular-nums">4.6<small class="ml-0.5 text-[0.5em] font-semibold text-tdl08-mut">TB</small></p><span class="text-[11.5px] font-bold text-tdl08-good">▲ 18% this week</span></div>
          <div aria-hidden="true" class="flex h-16 min-w-0 items-end gap-1.5 *:h-(--h) *:flex-1 *:rounded-t-[4px] *:bg-linear-to-t *:from-tdl08-c1/30 *:to-tdl08-c1"><i style="--h:35%"></i><i style="--h:55%"></i><i style="--h:42%"></i><i style="--h:68%"></i><i style="--h:58%"></i><i style="--h:80%"></i><i style="--h:72%"></i><i style="--h:95%"></i></div>
          <div class="hidden content-center gap-2 @min-[32.5rem]/w:grid"><div aria-hidden="true" class="flex h-1.5 overflow-hidden rounded-full"><i class="w-[62%] bg-tdl08-c1"></i><i class="w-[27%] bg-tdl08-c2"></i><i class="w-[11%] bg-tdl08-c3"></i></div><ul class="grid gap-1.5 text-xs font-semibold text-tdl08-mut [&_i]:size-2.5 [&_i]:rounded-[3px] [&>li]:flex [&>li]:items-center [&>li]:gap-2"><li><i class="bg-tdl08-c1" aria-hidden="true"></i>CDN 62%</li><li><i class="bg-tdl08-c2" aria-hidden="true"></i>API 27%</li><li><i class="bg-tdl08-c3" aria-hidden="true"></i>Media 11%</li></ul></div>
        </div>
      </div>
    </div>
    <div class="@container/w grid w-full max-w-full min-w-60 resize-x content-start gap-2.25 overflow-auto rounded-xl border-r-2 border-dashed border-tdl08-c1/45 pr-3.5 pb-1.5">
      <p class="flex items-center gap-2 text-[10.5px] font-bold tracking-[0.09em] text-tdl08-c1 uppercase"><span aria-hidden="true">⤡</span>Drag my bottom-right corner · breakpoints at 21.25rem and 32.5rem</p>
      <div class="grid gap-3.5 rounded-2xl border border-tdl08-edge bg-tdl08-panel p-4.5 shadow-[0_10px_26px_-20px_var(--color-tdl08-shadow)] @min-[21.25rem]/w:grid-cols-[auto_minmax(0,1fr)] @min-[21.25rem]/w:items-end @min-[32.5rem]/w:grid-cols-[auto_minmax(0,1fr)_9rem]">
        <div class="@min-[21.25rem]/w:self-center @min-[21.25rem]/w:pr-2"><h3 class="flex items-center gap-2 text-[11px] font-semibold tracking-[0.11em] text-tdl08-mut uppercase">Bandwidth<span class="rounded-full bg-tdl08-c1/12 px-1.75 py-0.5 text-[9.5px] tracking-[0.06em] text-tdl08-c1"><span class="@min-[21.25rem]/w:hidden">Stacked</span><span class="hidden @min-[21.25rem]/w:inline @min-[32.5rem]/w:hidden">Split</span><span class="hidden @min-[32.5rem]/w:inline">Full</span></span></h3><p class="mt-1 mb-0.5 text-[clamp(26px,10cqi,42px)]/[1.1] font-bold tracking-[-0.02em] tabular-nums">4.6<small class="ml-0.5 text-[0.5em] font-semibold text-tdl08-mut">TB</small></p><span class="text-[11.5px] font-bold text-tdl08-good">▲ 18% this week</span></div>
        <div aria-hidden="true" class="flex h-16 min-w-0 items-end gap-1.5 *:h-(--h) *:flex-1 *:rounded-t-[4px] *:bg-linear-to-t *:from-tdl08-c1/30 *:to-tdl08-c1"><i style="--h:35%"></i><i style="--h:55%"></i><i style="--h:42%"></i><i style="--h:68%"></i><i style="--h:58%"></i><i style="--h:80%"></i><i style="--h:72%"></i><i style="--h:95%"></i></div>
        <div class="hidden content-center gap-2 @min-[32.5rem]/w:grid"><div aria-hidden="true" class="flex h-1.5 overflow-hidden rounded-full"><i class="w-[62%] bg-tdl08-c1"></i><i class="w-[27%] bg-tdl08-c2"></i><i class="w-[11%] bg-tdl08-c3"></i></div><ul class="grid gap-1.5 text-xs font-semibold text-tdl08-mut [&_i]:size-2.5 [&_i]:rounded-[3px] [&>li]:flex [&>li]:items-center [&>li]:gap-2"><li><i class="bg-tdl08-c1" aria-hidden="true"></i>CDN 62%</li><li><i class="bg-tdl08-c2" aria-hidden="true"></i>API 27%</li><li><i class="bg-tdl08-c3" aria-hidden="true"></i>Media 11%</li></ul></div>
      </div>
    </div>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tdl08-bg: #f7f6fb;
  --color-tdl08-bg: oklch(0.975 0.006 290);
  --color-tdl08-bg2: #eeedf6;
  --color-tdl08-bg2: oklch(0.95 0.01 290);
  --color-tdl08-panel: #ffffff;
  --color-tdl08-panel: oklch(1 0 0);
  --color-tdl08-edge: #e2e0ec;
  --color-tdl08-edge: oklch(0.91 0.012 290);
  --color-tdl08-ink: #27243a;
  --color-tdl08-ink: oklch(0.27 0.03 290);
  --color-tdl08-mut: #5d5a70;
  --color-tdl08-mut: oklch(0.49 0.03 290);
  --color-tdl08-c1: #7046d8;
  --color-tdl08-c1: oklch(0.53 0.2 292);
  --color-tdl08-c2: #3aa3d6;
  --color-tdl08-c2: oklch(0.68 0.12 230);
  --color-tdl08-c3: #e2b93a;
  --color-tdl08-c3: oklch(0.8 0.14 90);
  --color-tdl08-good: #187d4b;
  --color-tdl08-good: oklch(0.52 0.13 155);
  --color-tdl08-shadow: #6a5aa0;
  --color-tdl08-shadow: oklch(0.45 0.08 290 / 0.55);
  --font-tdl08-sans: 'Sora', system-ui, sans-serif;
}

.tdl-08 {
  width: 100%;
  min-height: 100svh;
}

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-tdl08-bg: #f7f6fb;
  --color-tdl08-bg: oklch(0.975 0.006 290);
  --color-tdl08-bg2: #eeedf6;
  --color-tdl08-bg2: oklch(0.95 0.01 290);
  --color-tdl08-panel: #ffffff;
  --color-tdl08-panel: oklch(1 0 0);
  --color-tdl08-edge: #e2e0ec;
  --color-tdl08-edge: oklch(0.91 0.012 290);
  --color-tdl08-ink: #27243a;
  --color-tdl08-ink: oklch(0.27 0.03 290);
  --color-tdl08-mut: #5d5a70;
  --color-tdl08-mut: oklch(0.49 0.03 290);
  --color-tdl08-c1: #7046d8;
  --color-tdl08-c1: oklch(0.53 0.2 292);
  --color-tdl08-c2: #3aa3d6;
  --color-tdl08-c2: oklch(0.68 0.12 230);
  --color-tdl08-c3: #e2b93a;
  --color-tdl08-c3: oklch(0.8 0.14 90);
  --color-tdl08-good: #187d4b;
  --color-tdl08-good: oklch(0.52 0.13 155);
  --color-tdl08-shadow: #6a5aa0;
  --color-tdl08-shadow: oklch(0.45 0.08 290 / 0.55);
  --font-tdl08-sans: 'Sora', system-ui, sans-serif;
}

.tdl-08 {
  width: 100%;
  min-height: 100svh;
}
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=Sora:wght@400..700&display=swap">

What changed in the port

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

  • Two hand-written @container cdl08w (min-width:…) blocks became @min-[21.25rem]/w: and @min-[32.5rem]/w: variants — v4 ships container queries in core, so no plugin and no CSS.
  • The legend's display:none → grid swap is just hidden @min-[32.5rem]/w:grid.
  • UI upgrade from the CSS original: every card carries a live Stacked / Split / Full badge driven purely by container variants, so the concept is visible rather than explained; the full layout adds a proportional composition bar above the legend.
  • UI upgrade: the narrow slot now goes full-width on phones (max-sm:flex-auto) instead of leaving a 250px card stranded; content is centred in a max-w-6xl column; muted copy rose to 6.6:1.
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 CSS Container Query Responsive Dashboard Cards
Source: https://codefronts.com/layouts/tailwind-css-dashboard-layouts/tailwind-css-container-query-responsive-dashboard-cards/

The same widget markup in three slots &mdash; a narrow card, a medium card and one you drag &mdash; renders three layouts: stacked, value-beside-chart, and full analytics with a legend rail. In v4, container queries are built in: @container/w on the slot, @min-[21.25rem]/w: and @min-[32.5rem]/w: on the widget. A live badge on every card names the layout it is currently in.
## HTML
```html
<section class="tdl-08 w-full min-h-svh bg-tdl08-bg bg-linear-175 from-tdl08-bg to-tdl08-bg2 font-tdl08-sans text-tdl08-ink antialiased" aria-label="Container query widget demo">
  <div class="mx-auto grid min-h-svh w-full max-w-6xl content-center gap-5 p-4 sm:p-6">
    <div class="flex flex-wrap gap-4">
      <div class="@container/w grid min-w-0 flex-[0_0_16.25rem] content-start gap-2.25 max-sm:flex-auto">
        <p class="text-[10.5px] font-bold tracking-[0.09em] text-tdl08-mut uppercase">16.25rem slot</p>
        <div class="grid gap-3.5 rounded-2xl border border-tdl08-edge bg-tdl08-panel p-4.5 shadow-[0_10px_26px_-20px_var(--color-tdl08-shadow)] @min-[21.25rem]/w:grid-cols-[auto_minmax(0,1fr)] @min-[21.25rem]/w:items-end @min-[32.5rem]/w:grid-cols-[auto_minmax(0,1fr)_9rem]">
          <div class="@min-[21.25rem]/w:self-center @min-[21.25rem]/w:pr-2"><h3 class="flex items-center gap-2 text-[11px] font-semibold tracking-[0.11em] text-tdl08-mut uppercase">Bandwidth<span class="rounded-full bg-tdl08-c1/12 px-1.75 py-0.5 text-[9.5px] tracking-[0.06em] text-tdl08-c1"><span class="@min-[21.25rem]/w:hidden">Stacked</span><span class="hidden @min-[21.25rem]/w:inline @min-[32.5rem]/w:hidden">Split</span><span class="hidden @min-[32.5rem]/w:inline">Full</span></span></h3><p class="mt-1 mb-0.5 text-[clamp(26px,10cqi,42px)]/[1.1] font-bold tracking-[-0.02em] tabular-nums">4.6<small class="ml-0.5 text-[0.5em] font-semibold text-tdl08-mut">TB</small></p><span class="text-[11.5px] font-bold text-tdl08-good">▲ 18% this week</span></div>
          <div aria-hidden="true" class="flex h-16 min-w-0 items-end gap-1.5 *:h-(--h) *:flex-1 *:rounded-t-[4px] *:bg-linear-to-t *:from-tdl08-c1/30 *:to-tdl08-c1"><i style="--h:35%"></i><i style="--h:55%"></i><i style="--h:42%"></i><i style="--h:68%"></i><i style="--h:58%"></i><i style="--h:80%"></i><i style="--h:72%"></i><i style="--h:95%"></i></div>
          <div class="hidden content-center gap-2 @min-[32.5rem]/w:grid"><div aria-hidden="true" class="flex h-1.5 overflow-hidden rounded-full"><i class="w-[62%] bg-tdl08-c1"></i><i class="w-[27%] bg-tdl08-c2"></i><i class="w-[11%] bg-tdl08-c3"></i></div><ul class="grid gap-1.5 text-xs font-semibold text-tdl08-mut [&_i]:size-2.5 [&_i]:rounded-[3px] [&>li]:flex [&>li]:items-center [&>li]:gap-2"><li><i class="bg-tdl08-c1" aria-hidden="true"></i>CDN 62%</li><li><i class="bg-tdl08-c2" aria-hidden="true"></i>API 27%</li><li><i class="bg-tdl08-c3" aria-hidden="true"></i>Media 11%</li></ul></div>
        </div>
      </div>
      <div class="@container/w grid min-w-0 flex-[1_1_19rem] content-start gap-2.25">
        <p class="text-[10.5px] font-bold tracking-[0.09em] text-tdl08-mut uppercase">Fluid slot</p>
        <div class="grid gap-3.5 rounded-2xl border border-tdl08-edge bg-tdl08-panel p-4.5 shadow-[0_10px_26px_-20px_var(--color-tdl08-shadow)] @min-[21.25rem]/w:grid-cols-[auto_minmax(0,1fr)] @min-[21.25rem]/w:items-end @min-[32.5rem]/w:grid-cols-[auto_minmax(0,1fr)_9rem]">
          <div class="@min-[21.25rem]/w:self-center @min-[21.25rem]/w:pr-2"><h3 class="flex items-center gap-2 text-[11px] font-semibold tracking-[0.11em] text-tdl08-mut uppercase">Bandwidth<span class="rounded-full bg-tdl08-c1/12 px-1.75 py-0.5 text-[9.5px] tracking-[0.06em] text-tdl08-c1"><span class="@min-[21.25rem]/w:hidden">Stacked</span><span class="hidden @min-[21.25rem]/w:inline @min-[32.5rem]/w:hidden">Split</span><span class="hidden @min-[32.5rem]/w:inline">Full</span></span></h3><p class="mt-1 mb-0.5 text-[clamp(26px,10cqi,42px)]/[1.1] font-bold tracking-[-0.02em] tabular-nums">4.6<small class="ml-0.5 text-[0.5em] font-semibold text-tdl08-mut">TB</small></p><span class="text-[11.5px] font-bold text-tdl08-good">▲ 18% this week</span></div>
          <div aria-hidden="true" class="flex h-16 min-w-0 items-end gap-1.5 *:h-(--h) *:flex-1 *:rounded-t-[4px] *:bg-linear-to-t *:from-tdl08-c1/30 *:to-tdl08-c1"><i style="--h:35%"></i><i style="--h:55%"></i><i style="--h:42%"></i><i style="--h:68%"></i><i style="--h:58%"></i><i style="--h:80%"></i><i style="--h:72%"></i><i style="--h:95%"></i></div>
          <div class="hidden content-center gap-2 @min-[32.5rem]/w:grid"><div aria-hidden="true" class="flex h-1.5 overflow-hidden rounded-full"><i class="w-[62%] bg-tdl08-c1"></i><i class="w-[27%] bg-tdl08-c2"></i><i class="w-[11%] bg-tdl08-c3"></i></div><ul class="grid gap-1.5 text-xs font-semibold text-tdl08-mut [&_i]:size-2.5 [&_i]:rounded-[3px] [&>li]:flex [&>li]:items-center [&>li]:gap-2"><li><i class="bg-tdl08-c1" aria-hidden="true"></i>CDN 62%</li><li><i class="bg-tdl08-c2" aria-hidden="true"></i>API 27%</li><li><i class="bg-tdl08-c3" aria-hidden="true"></i>Media 11%</li></ul></div>
        </div>
      </div>
    </div>
    <div class="@container/w grid w-full max-w-full min-w-60 resize-x content-start gap-2.25 overflow-auto rounded-xl border-r-2 border-dashed border-tdl08-c1/45 pr-3.5 pb-1.5">
      <p class="flex items-center gap-2 text-[10.5px] font-bold tracking-[0.09em] text-tdl08-c1 uppercase"><span aria-hidden="true">⤡</span>Drag my bottom-right corner · breakpoints at 21.25rem and 32.5rem</p>
      <div class="grid gap-3.5 rounded-2xl border border-tdl08-edge bg-tdl08-panel p-4.5 shadow-[0_10px_26px_-20px_var(--color-tdl08-shadow)] @min-[21.25rem]/w:grid-cols-[auto_minmax(0,1fr)] @min-[21.25rem]/w:items-end @min-[32.5rem]/w:grid-cols-[auto_minmax(0,1fr)_9rem]">
        <div class="@min-[21.25rem]/w:self-center @min-[21.25rem]/w:pr-2"><h3 class="flex items-center gap-2 text-[11px] font-semibold tracking-[0.11em] text-tdl08-mut uppercase">Bandwidth<span class="rounded-full bg-tdl08-c1/12 px-1.75 py-0.5 text-[9.5px] tracking-[0.06em] text-tdl08-c1"><span class="@min-[21.25rem]/w:hidden">Stacked</span><span class="hidden @min-[21.25rem]/w:inline @min-[32.5rem]/w:hidden">Split</span><span class="hidden @min-[32.5rem]/w:inline">Full</span></span></h3><p class="mt-1 mb-0.5 text-[clamp(26px,10cqi,42px)]/[1.1] font-bold tracking-[-0.02em] tabular-nums">4.6<small class="ml-0.5 text-[0.5em] font-semibold text-tdl08-mut">TB</small></p><span class="text-[11.5px] font-bold text-tdl08-good">▲ 18% this week</span></div>
        <div aria-hidden="true" class="flex h-16 min-w-0 items-end gap-1.5 *:h-(--h) *:flex-1 *:rounded-t-[4px] *:bg-linear-to-t *:from-tdl08-c1/30 *:to-tdl08-c1"><i style="--h:35%"></i><i style="--h:55%"></i><i style="--h:42%"></i><i style="--h:68%"></i><i style="--h:58%"></i><i style="--h:80%"></i><i style="--h:72%"></i><i style="--h:95%"></i></div>
        <div class="hidden content-center gap-2 @min-[32.5rem]/w:grid"><div aria-hidden="true" class="flex h-1.5 overflow-hidden rounded-full"><i class="w-[62%] bg-tdl08-c1"></i><i class="w-[27%] bg-tdl08-c2"></i><i class="w-[11%] bg-tdl08-c3"></i></div><ul class="grid gap-1.5 text-xs font-semibold text-tdl08-mut [&_i]:size-2.5 [&_i]:rounded-[3px] [&>li]:flex [&>li]:items-center [&>li]:gap-2"><li><i class="bg-tdl08-c1" aria-hidden="true"></i>CDN 62%</li><li><i class="bg-tdl08-c2" aria-hidden="true"></i>API 27%</li><li><i class="bg-tdl08-c3" aria-hidden="true"></i>Media 11%</li></ul></div>
      </div>
    </div>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tdl08-bg: #f7f6fb;
  --color-tdl08-bg: oklch(0.975 0.006 290);
  --color-tdl08-bg2: #eeedf6;
  --color-tdl08-bg2: oklch(0.95 0.01 290);
  --color-tdl08-panel: #ffffff;
  --color-tdl08-panel: oklch(1 0 0);
  --color-tdl08-edge: #e2e0ec;
  --color-tdl08-edge: oklch(0.91 0.012 290);
  --color-tdl08-ink: #27243a;
  --color-tdl08-ink: oklch(0.27 0.03 290);
  --color-tdl08-mut: #5d5a70;
  --color-tdl08-mut: oklch(0.49 0.03 290);
  --color-tdl08-c1: #7046d8;
  --color-tdl08-c1: oklch(0.53 0.2 292);
  --color-tdl08-c2: #3aa3d6;
  --color-tdl08-c2: oklch(0.68 0.12 230);
  --color-tdl08-c3: #e2b93a;
  --color-tdl08-c3: oklch(0.8 0.14 90);
  --color-tdl08-good: #187d4b;
  --color-tdl08-good: oklch(0.52 0.13 155);
  --color-tdl08-shadow: #6a5aa0;
  --color-tdl08-shadow: oklch(0.45 0.08 290 / 0.55);
  --font-tdl08-sans: 'Sora', system-ui, sans-serif;
}

.tdl-08 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

The slot is the breakpoint. Mark the wrapper as a named container, then query it from any descendant:

<div class="@container/w">
  <div class="grid @min-[21.25rem]/w:grid-cols-[auto_minmax(0,1fr)]
              @min-[32.5rem]/w:grid-cols-[auto_minmax(0,1fr)_9rem]">

Badges without JS. Each card prints its state with three spans: @min-[21.25rem]/w:hidden (Stacked), hidden @min-[21.25rem]/w:inline @min-[32.5rem]/w:hidden (Split) and hidden @min-[32.5rem]/w:inline (Full). Drag the third slot and watch it change.

Container units. cqi is 1% of the container's inline size, so clamp(26px,10cqi,42px) gives every card a proportionate headline whatever column it lands in.

Make it yours

  • Breakpoints: edit 21.25rem (340px) and 32.5rem (520px) — or use the named sizes @sm/w: (24rem) and @lg/w: (32rem).
  • Legend width: the 9rem third column.
  • Container name: /w scopes queries to the nearest @container/w; nest other containers freely.
  • Accent colours: --color-tdl08-c1 / c2 / c3.

Gotchas — read before shipping

  • A container cannot query itself — the @container class goes on the slot and the @min-* variants on its descendants.
  • container-type:inline-size applies size containment: a container with no explicit width in a shrink-to-fit context collapses to 0. Give slots a flex basis or width.
  • resize-x only works with overflow other than visible; the native handle cannot be styled.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Tailwind v4 floor; size container queries and cqi are inside it (Chrome 105 / Safari 16 / Firefox 110).

Techniques used in this demo

Utilitiesfirst-class utility or variant

container queriestw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →