~/css/tailwind-dashboard-layouts

6 Tailwind Dashboard Layouts

6 TailwindPublished 2026-10-05Free · no sign-up

Six dashboard pieces in Tailwind: a mini app shell with an icon rail, KPI cards with trend badges, a bar chart card, a recent orders table, an activity timeline and a bento grid of widgets.

Filter demos

01. Tailwind Mini App Shell

TailwindDashboardShell

The skeleton of a dashboard: an icon rail on the left, a top bar and a content grid. flex for the outer frame, min-w-0 on the content column so it can shrink, and grid for the cards inside.

View code

<div class="flex h-60 w-full max-w-sm overflow-hidden rounded-xl bg-slate-100 ring-1 ring-slate-300">
  <nav aria-label="App" class="flex w-12 shrink-0 flex-col items-center gap-2 bg-slate-900 py-3">
    <span aria-hidden="true" class="mb-1 size-6 rounded-md bg-indigo-500"></span>
    <a href="#home" aria-label="Home" aria-current="page" class="grid size-8 place-items-center rounded-lg bg-white/15 text-white">⌂</a>
    <a href="#orders" aria-label="Orders" class="grid size-8 place-items-center rounded-lg text-slate-300 hover:bg-white/10 hover:text-white">▤</a>
    <a href="#settings" aria-label="Settings" class="grid size-8 place-items-center rounded-lg text-slate-300 hover:bg-white/10 hover:text-white">⚙</a>
  </nav>
  <div class="flex min-w-0 flex-1 flex-col">
    <div class="flex h-10 shrink-0 items-center justify-between border-b border-slate-200 bg-white px-3"><h3 class="text-sm font-bold text-slate-900">Overview</h3><span aria-hidden="true" class="size-6 rounded-full bg-amber-300"></span></div>
    <div class="grid flex-1 grid-cols-2 gap-2 p-2">
      <div class="rounded-lg bg-white p-2"><p class="text-xs text-slate-600">Sales</p><p class="font-bold text-slate-900">$8.2k</p></div>
      <div class="rounded-lg bg-white p-2"><p class="text-xs text-slate-600">Orders</p><p class="font-bold text-slate-900">214</p></div>
      <div aria-hidden="true" class="col-span-2 flex items-end gap-1 rounded-lg bg-white p-2"><span class="h-[30%] flex-1 rounded-sm bg-indigo-300"></span><span class="h-[55%] flex-1 rounded-sm bg-indigo-400"></span><span class="h-[40%] flex-1 rounded-sm bg-indigo-300"></span><span class="h-[80%] flex-1 rounded-sm bg-indigo-600"></span><span class="h-[65%] flex-1 rounded-sm bg-indigo-400"></span></div>
    </div>
  </div>
</div>

02. Tailwind KPI Stat Cards

TailwindDashboardStats

Four key numbers in a two-by-two grid, each with a coloured trend badge. The trend is written as text with an arrow and a word, so up and down are clear without relying on green and red.

View code

<dl class="grid w-full max-w-xs grid-cols-2 gap-3">
  <div class="rounded-xl bg-white p-3 shadow-sm ring-1 ring-slate-200"><dt class="text-xs font-medium text-slate-600">Revenue</dt><dd class="mt-1 text-xl font-bold text-slate-900">$24.1k</dd><dd class="mt-1 inline-block rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-semibold text-emerald-800">↑ 12% up</dd></div>
  <div class="rounded-xl bg-white p-3 shadow-sm ring-1 ring-slate-200"><dt class="text-xs font-medium text-slate-600">Orders</dt><dd class="mt-1 text-xl font-bold text-slate-900">612</dd><dd class="mt-1 inline-block rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-semibold text-emerald-800">↑ 4% up</dd></div>
  <div class="rounded-xl bg-white p-3 shadow-sm ring-1 ring-slate-200"><dt class="text-xs font-medium text-slate-600">Refunds</dt><dd class="mt-1 text-xl font-bold text-slate-900">9</dd><dd class="mt-1 inline-block rounded-full bg-red-100 px-2 py-0.5 text-xs font-semibold text-red-800">↑ 2 more</dd></div>
  <div class="rounded-xl bg-white p-3 shadow-sm ring-1 ring-slate-200"><dt class="text-xs font-medium text-slate-600">Avg. order</dt><dd class="mt-1 text-xl font-bold text-slate-900">$39</dd><dd class="mt-1 inline-block rounded-full bg-slate-100 px-2 py-0.5 text-xs font-semibold text-slate-700">→ no change</dd></div>
</dl>

03. Tailwind Bar Chart Card

TailwindDashboardChart

A weekly bar chart drawn with flex items whose heights are arbitrary percentages, inside a card with a title and total. The chart has role="img" and an aria-label summarising the numbers, so the data is not locked in the drawing.

View code

<section class="w-full max-w-xs rounded-2xl bg-white p-4 shadow-sm ring-1 ring-slate-200">
  <div class="flex items-baseline justify-between"><h3 class="font-bold text-slate-900">Visitors this week</h3><p class="text-sm font-semibold text-slate-600">3,940</p></div>
  <div role="img" aria-label="Daily visitors Monday to Sunday: 420, 610, 380, 720, 560, 690, 560" class="mt-4 flex h-32 items-end gap-2">
    <span class="h-[58%] flex-1 rounded-t-md bg-sky-300"></span><span class="h-[85%] flex-1 rounded-t-md bg-sky-400"></span><span class="h-[53%] flex-1 rounded-t-md bg-sky-300"></span><span class="h-full flex-1 rounded-t-md bg-sky-600"></span><span class="h-[78%] flex-1 rounded-t-md bg-sky-400"></span><span class="h-[96%] flex-1 rounded-t-md bg-sky-500"></span><span class="h-[78%] flex-1 rounded-t-md bg-sky-400"></span>
  </div>
  <div aria-hidden="true" class="mt-1 flex gap-2 text-center text-xs text-slate-600"><span class="flex-1">M</span><span class="flex-1">T</span><span class="flex-1">W</span><span class="flex-1">T</span><span class="flex-1">F</span><span class="flex-1">S</span><span class="flex-1">S</span></div>
</section>

04. Tailwind Recent Orders Table

TailwindDashboardTable

A compact orders table with status pills, inside a wrapper that scrolls sideways on narrow screens instead of squashing the columns. The scroll wrapper is a labelled, focusable region so keyboard users can scroll it too.

View code

<div role="region" aria-label="Recent orders" tabindex="0" class="w-full max-w-xs overflow-x-auto rounded-2xl bg-white shadow-sm ring-1 ring-slate-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-indigo-600">
  <table class="w-full min-w-[320px] text-left text-sm">
    <thead class="bg-slate-50 text-xs uppercase tracking-wide text-slate-600"><tr><th scope="col" class="px-3 py-2">Order</th><th scope="col" class="px-3 py-2">Customer</th><th scope="col" class="px-3 py-2">Status</th><th scope="col" class="px-3 py-2 text-right">Total</th></tr></thead>
    <tbody class="divide-y divide-slate-100 text-slate-800">
      <tr><td class="px-3 py-2 font-mono text-xs">#1042</td><td class="px-3 py-2">Ana P.</td><td class="px-3 py-2"><span class="rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-semibold text-emerald-800">Paid</span></td><td class="px-3 py-2 text-right">$84</td></tr>
      <tr><td class="px-3 py-2 font-mono text-xs">#1041</td><td class="px-3 py-2">Leo M.</td><td class="px-3 py-2"><span class="rounded-full bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-800">Pending</span></td><td class="px-3 py-2 text-right">$120</td></tr>
      <tr><td class="px-3 py-2 font-mono text-xs">#1040</td><td class="px-3 py-2">Sara K.</td><td class="px-3 py-2"><span class="rounded-full bg-red-100 px-2 py-0.5 text-xs font-semibold text-red-800">Refunded</span></td><td class="px-3 py-2 text-right">$36</td></tr>
    </tbody>
  </table>
</div>

05. Tailwind Activity Feed

TailwindDashboardTimeline

A recent activity panel with coloured dots joined by a vertical line, the line drawn by a before: pseudo-element on each item. Times use the time element so the order of events is machine-readable.

View code

<section class="w-full max-w-xs rounded-2xl bg-white p-4 shadow-sm ring-1 ring-slate-200">
  <h3 class="font-bold text-slate-900">Activity</h3>
  <ol class="mt-3 grid gap-4">
    <li class="relative pl-6 before:absolute before:left-[5px] before:top-4 before:h-[calc(100%+4px)] before:w-0.5 before:bg-slate-200"><span aria-hidden="true" class="absolute left-0 top-1 size-3 rounded-full bg-indigo-600"></span><p class="text-sm text-slate-800"><b>Mia</b> published the spring collection</p><time datetime="2026-10-05T09:12" class="text-xs text-slate-600">09:12</time></li>
    <li class="relative pl-6 before:absolute before:left-[5px] before:top-4 before:h-[calc(100%+4px)] before:w-0.5 before:bg-slate-200"><span aria-hidden="true" class="absolute left-0 top-1 size-3 rounded-full bg-emerald-600"></span><p class="text-sm text-slate-800">Order <b>#1042</b> was paid</p><time datetime="2026-10-05T08:40" class="text-xs text-slate-600">08:40</time></li>
    <li class="relative pl-6"><span aria-hidden="true" class="absolute left-0 top-1 size-3 rounded-full bg-amber-500"></span><p class="text-sm text-slate-800">Low stock on <b>Canvas tote</b></p><time datetime="2026-10-05T07:55" class="text-xs text-slate-600">07:55</time></li>
  </ol>
</section>

06. Tailwind Dashboard Bento Grid

TailwindDashboardBento

Dashboard widgets of different sizes packed into one grid with col-span-2 and row-span-2, the bento layout. The big tile holds the headline number and the smaller tiles hold supporting figures.

View code

<div class="grid w-full max-w-xs grid-cols-3 grid-rows-3 gap-2 text-white">
  <div class="col-span-2 row-span-2 grid content-between rounded-2xl bg-gradient-to-br from-indigo-600 to-violet-800 p-4"><p class="text-sm text-indigo-100">Revenue, October</p><p class="text-3xl font-black">$48,200</p></div>
  <div class="grid content-between rounded-2xl bg-slate-800 p-3"><p class="text-xs text-slate-300">Orders</p><p class="text-lg font-bold">1.2k</p></div>
  <div class="grid content-between rounded-2xl bg-slate-800 p-3"><p class="text-xs text-slate-300">Returns</p><p class="text-lg font-bold">2%</p></div>
  <div class="col-span-3 flex items-center justify-between rounded-2xl bg-emerald-700 p-3"><p class="text-sm font-semibold">Goal progress</p><p class="text-lg font-bold">82%</p></div>
</div>

About these Tailwind Dashboard Layouts

Shell first

A dashboard is a frame of flex: a fixed rail or sidebar with shrink-0 and a content column with min-w-0 flex-1, so wide tables cannot push the layout sideways.

Grids for widgets

Inside the content, a grid with col-span and row-span arranges cards of different sizes into a tidy bento.

Trends in words

Write up, down or no change next to the arrow. Colour helps scanning but cannot carry the meaning alone.

Tables that scroll

Wrap tables in overflow-x-auto with role="region", a label and tabindex="0" so keyboard users can scroll them.

Frequently asked questions

Are the charts real charts?

The bar chart is drawn with divs for illustration; for live data use a chart library and keep a text summary.

How do I make the shell full screen?

Replace the fixed height with h-svh on the outer frame.

Is there a CSS version?

Yes, see the CSS dashboard layouts collection.