📊 Каркас дашборда

<div class="grid h-72 grid-rows-[auto_1fr] overflow-hidden rounded-xl border border-slate-200 bg-white
            lg:grid-cols-[13rem_1fr] dark:border-slate-700 dark:bg-slate-900">
  <aside class="hidden border-r border-slate-200 bg-slate-50 p-3 lg:col-start-1 lg:row-span-2 lg:block
                dark:border-slate-700 dark:bg-slate-950">
    <div class="flex items-center gap-2">
      <div class="size-6 rounded bg-slate-900 dark:bg-slate-100"></div>
      <span class="text-sm font-semibold text-slate-900 dark:text-slate-50">Панель</span>
    </div>
    <nav class="mt-3 flex flex-col gap-1 text-sm">
      <a href="#" aria-current="page" class="rounded-md bg-slate-200 px-2 py-1.5 font-medium text-slate-900 dark:bg-slate-800 dark:text-slate-100">Обзор</a>
      <a href="#" class="rounded-md px-2 py-1.5 text-slate-600 hover:bg-slate-200 dark:text-slate-300 dark:hover:bg-slate-800">Заказы</a>
      <a href="#" class="rounded-md px-2 py-1.5 text-slate-600 hover:bg-slate-200 dark:text-slate-300 dark:hover:bg-slate-800">Клиенты</a>
    </nav>
  </aside>
  <header class="flex items-center gap-2 border-b border-slate-200 px-3 py-2 lg:col-start-2 dark:border-slate-700">
    <button class="rounded-md border border-slate-300 p-1.5 text-slate-600 lg:hidden dark:border-slate-600 dark:text-slate-300" aria-label="Меню">☰</button>
    <input class="min-w-0 flex-1 rounded-md border border-slate-300 bg-transparent px-2 py-1 text-sm dark:border-slate-600 dark:text-slate-100" placeholder="Поиск">
    <div class="size-7 shrink-0 rounded-full bg-slate-200 dark:bg-slate-700"></div>
  </header>
  <main class="space-y-3 overflow-y-auto p-3 lg:col-start-2">
    <div class="grid grid-cols-2 gap-3 xl:grid-cols-4">
      <div class="rounded-lg border border-slate-200 p-3 dark:border-slate-700"><p class="text-xs text-slate-500 dark:text-slate-400">Заказы</p><p class="mt-1 text-lg font-semibold tabular-nums text-slate-900 dark:text-slate-50">348</p></div>
      <div class="rounded-lg border border-slate-200 p-3 dark:border-slate-700"><p class="text-xs text-slate-500 dark:text-slate-400">Выручка</p><p class="mt-1 text-lg font-semibold tabular-nums text-slate-900 dark:text-slate-50">1,2 млн</p></div>
      <div class="rounded-lg border border-slate-200 p-3 dark:border-slate-700"><p class="text-xs text-slate-500 dark:text-slate-400">Клиенты</p><p class="mt-1 text-lg font-semibold tabular-nums text-slate-900 dark:text-slate-50">86</p></div>
      <div class="rounded-lg border border-slate-200 p-3 dark:border-slate-700"><p class="text-xs text-slate-500 dark:text-slate-400">Возвраты</p><p class="mt-1 text-lg font-semibold tabular-nums text-slate-900 dark:text-slate-50">12</p></div>
    </div>
    <div class="rounded-lg border border-slate-200 p-3 text-sm text-slate-600 dark:border-slate-700 dark:text-slate-400">
      Прокручивается только эта область — сайдбар и шапка остаются на месте.
    </div>
    <div class="rounded-lg border border-slate-200 p-3 text-sm text-slate-600 dark:border-slate-700 dark:text-slate-400">Блок 2</div>
    <div class="rounded-lg border border-slate-200 p-3 text-sm text-slate-600 dark:border-slate-700 dark:text-slate-400">Блок 3</div>
    <div class="rounded-lg border border-slate-200 p-3 text-sm text-slate-600 dark:border-slate-700 dark:text-slate-400">Блок 4</div>
  </main>
</div>

<div class="flex h-56 overflow-hidden rounded-xl border border-slate-200 dark:border-slate-700">
  <aside class="flex w-14 flex-col items-center gap-2 border-r border-slate-200 bg-slate-50 py-3 dark:border-slate-700 dark:bg-slate-950">
    <div class="size-7 rounded bg-slate-900 dark:bg-slate-100"></div>
    <button class="flex size-8 items-center justify-center rounded-md bg-slate-200 dark:bg-slate-800" aria-label="Обзор">▦</button>
    <button class="flex size-8 items-center justify-center rounded-md text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-800" aria-label="Заказы">▤</button>
    <button class="flex size-8 items-center justify-center rounded-md text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-800" aria-label="Настройки">⚙</button>
  </aside>
  <div class="flex-1 p-4 text-sm text-slate-600 dark:text-slate-400">
    Узкий сайдбар экономит место. Каждой кнопке нужен <code class="rounded bg-slate-100 px-1 dark:bg-slate-800">aria-label</code>.
  </div>
</div>