A shop dashboard
A dashboard is an internal page where the shop owner sees sales and orders. Unlike a landing page, density matters here: lots of data on one screen, a clear hierarchy and tidy tables.
The frame: menu and content
On a wide screen a narrow menu column sits on the left and the main area on the right. The grid uses a fixed-width column in square brackets:
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="grid min-h-64 bg-gray-50 md:grid-cols-[180px_1fr]">
<aside class="bg-gray-900 p-4 text-sm text-gray-300">
<p class="mb-4 font-bold text-white">SoundShop</p>
<nav class="flex gap-1 md:flex-col">
<a href="#" class="rounded-md bg-gray-800 px-3 py-2 text-white">Overview</a>
<a href="#" class="rounded-md px-3 py-2 hover:bg-gray-800">Orders</a>
<a href="#" class="rounded-md px-3 py-2 hover:bg-gray-800">Products</a>
</nav>
</aside>
<main class="min-w-0 p-6">
<h1 class="text-xl font-semibold text-gray-900">Overview</h1>
</main>
</div>On a narrow screen the menu becomes a row above the content, and from md: it moves into the side column. The active item is highlighted with a background.
Stat tiles
Key numbers are shown large, with a short label and the change over the period:
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="grid gap-4 bg-gray-50 p-4 sm:grid-cols-3">
<div class="rounded-xl border border-gray-200 bg-white p-4">
<p class="text-sm text-gray-500">Revenue this week</p>
<p class="mt-1 text-2xl font-semibold text-gray-900">$12,480</p>
<p class="mt-1 text-sm text-green-600">+8% on last week</p>
</div>
<div class="rounded-xl border border-gray-200 bg-white p-4">
<p class="text-sm text-gray-500">Orders</p>
<p class="mt-1 text-2xl font-semibold text-gray-900">164</p>
<p class="mt-1 text-sm text-green-600">+12</p>
</div>
<div class="rounded-xl border border-gray-200 bg-white p-4">
<p class="text-sm text-gray-500">Returns</p>
<p class="mt-1 text-2xl font-semibold text-gray-900">3</p>
<p class="mt-1 text-sm text-red-600">+1</p>
</div>
</div>A gray label, a large number and a colored change — the eye finds the main thing at once.
The orders table
The table is wrapped in a block with overflow-x-auto so that on a phone it scrolls sideways instead of breaking the page:
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="overflow-x-auto rounded-xl border border-gray-200 bg-white">
<table class="w-full text-left text-sm">
<thead class="bg-gray-50 text-gray-500">
<tr>
<th class="px-4 py-3 font-medium">Order</th>
<th class="px-4 py-3 font-medium">Customer</th>
<th class="px-4 py-3 font-medium">Total</th>
<th class="px-4 py-3 font-medium">Status</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-100">
<tr class="hover:bg-gray-50">
<td class="px-4 py-3 font-medium">#1042</td>
<td class="px-4 py-3">Anna</td>
<td class="px-4 py-3 tabular-nums">$124</td>
<td class="px-4 py-3"><span class="rounded-full bg-green-100 px-2 py-0.5 text-xs text-green-800">Paid</span></td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-4 py-3 font-medium">#1041</td>
<td class="px-4 py-3">Oleg</td>
<td class="px-4 py-3 tabular-nums">$45</td>
<td class="px-4 py-3"><span class="rounded-full bg-amber-100 px-2 py-0.5 text-xs text-amber-800">Pending</span></td>
</tr>
</tbody>
</table>
</div>Rows are separated by thin lines and highlighted on hover, and tabular-nums gives digits equal width so totals are easy to compare. The statuses are the same colored labels as in the colors lesson.
Common mistake
Forgetting min-w-0 on the main area. A 1fr grid column and a flex item do not shrink below their content by default. A wide table stretches the column and pushes the page past the screen edge, and the table's overflow-x-auto never kicks in. Add the min-w-0 class to the main area, as in the first example of this lesson, and the table scrolls inside its block again.