Панель управления магазином
Панель управления (dashboard) — служебная страница, где владелец магазина видит продажи и заказы. В отличие от лендинга, здесь важна плотность: много данных на одном экране, понятная иерархия и аккуратные таблицы.
Каркас: меню и содержимое
На широком экране слева узкая колонка меню, справа — основная область. Сетку задаёт колонка фиксированной ширины в квадратных скобках:
<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">Обзор</a>
<a href="#" class="rounded-md px-3 py-2 hover:bg-gray-800">Заказы</a>
<a href="#" class="rounded-md px-3 py-2 hover:bg-gray-800">Товары</a>
</nav>
</aside>
<main class="min-w-0 p-6">
<h1 class="text-xl font-semibold text-gray-900">Обзор</h1>
</main>
</div>На узком экране меню становится строкой над содержимым, а с md: уходит в боковую колонку. Активный пункт выделен фоном.
Плитки с показателями
Ключевые числа показывают крупно, с короткой подписью и изменением за период:
<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">Выручка за неделю</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% к прошлой неделе</p>
</div>
<div class="rounded-xl border border-gray-200 bg-white p-4">
<p class="text-sm text-gray-500">Заказы</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">Возвраты</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>Серая подпись, крупное число и цветное изменение — глаз сразу находит главное.
Таблица заказов
Таблицу оборачивают в блок с overflow-x-auto, чтобы на телефоне она прокручивалась вбок, а не ломала страницу:
<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">Заказ</th>
<th class="px-4 py-3 font-medium">Покупатель</th>
<th class="px-4 py-3 font-medium">Сумма</th>
<th class="px-4 py-3 font-medium">Статус</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">Анна</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">Оплачен</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">Олег</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">Ожидает</span></td>
</tr>
</tbody>
</table>
</div>Строки разделены тонкими линиями и подсвечиваются при наведении, а tabular-nums выравнивает цифры по ширине, чтобы суммы было легко сравнивать. Статусы — те же цветные метки, что и в уроке о цветах.
Частая ошибка
Забыть min-w-0 у основной области. Колонка 1fr в сетке и элемент flex-контейнера по умолчанию не сжимаются уже своего содержимого. Широкая таблица распирает колонку и выталкивает страницу за край экрана, а overflow-x-auto у таблицы не срабатывает. Добавьте основной области класс min-w-0, как в первом примере урока, — и таблица снова прокручивается внутри своего блока.