Sidebar + stat cards

Build a dashboard shell with Tailwind CSS: a fixed left sidebar (logo, nav items with active state, user chip at bottom) and a main area with a top bar (page title + primary button) and a row of four KPI cards, each showing a label, a big value, and a small delta. Keep it light with borders and rounded-2xl cards. Hide the sidebar under lg.

<div class="flex min-h-screen bg-neutral-50">
  <aside class="hidden w-60 flex-col border-r border-neutral-200 bg-white p-4 lg:flex">
    <div class="mb-6 flex items-center gap-2 px-2 font-semibold text-neutral-900"><span class="h-6 w-6 rounded-md bg-neutral-900"></span> Console</div>
    <nav class="space-y-1 text-sm">
      <a href="#" class="flex items-center gap-2 rounded-lg bg-neutral-900 px-3 py-2 font-medium text-white">Overview</a>
      <a href="#" class="flex items-center gap-2 rounded-lg px-3 py-2 text-neutral-600 hover:bg-neutral-100">Analytics</a>
      <a href="#" class="flex items-center gap-2 rounded-lg px-3 py-2 text-neutral-600 hover:bg-neutral-100">Customers</a>
      <a href="#" class="flex items-center gap-2 rounded-lg px-3 py-2 text-neutral-600 hover:bg-neutral-100">Settings</a>
    </nav>
    <div class="mt-auto flex items-center gap-2 rounded-lg p-2 text-sm">
      <span class="h-8 w-8 rounded-full bg-neutral-200"></span>
      <span><span class="block font-medium text-neutral-900">Sam Lee</span><span class="block text-xs text-neutral-500">Admin</span></span>
    </div>
  </aside>
  <main class="flex-1 p-6">
    <div class="mb-6 flex items-center justify-between">
      <h1 class="text-xl font-semibold text-neutral-900">Overview</h1>
      <button class="rounded-lg bg-neutral-900 px-4 py-2 text-sm font-medium text-white hover:bg-neutral-800">New report</button>
    </div>
    <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
      <div class="rounded-2xl border border-neutral-200 bg-white p-5"><p class="text-sm text-neutral-500">Revenue</p><p class="mt-2 text-2xl font-semibold text-neutral-900">$48.2k</p><p class="mt-1 text-xs text-green-600">↑ 12% vs last month</p></div>
      <div class="rounded-2xl border border-neutral-200 bg-white p-5"><p class="text-sm text-neutral-500">Users</p><p class="mt-2 text-2xl font-semibold text-neutral-900">8,940</p><p class="mt-1 text-xs text-green-600">↑ 4.1%</p></div>
      <div class="rounded-2xl border border-neutral-200 bg-white p-5"><p class="text-sm text-neutral-500">Churn</p><p class="mt-2 text-2xl font-semibold text-neutral-900">1.8%</p><p class="mt-1 text-xs text-red-600">↑ 0.3%</p></div>
      <div class="rounded-2xl border border-neutral-200 bg-white p-5"><p class="text-sm text-neutral-500">MRR</p><p class="mt-2 text-2xl font-semibold text-neutral-900">$12.4k</p><p class="mt-1 text-xs text-green-600">↑ 7%</p></div>
    </div>
  </main>
</div>