Real-world Project: Dashboard

<!-- Dashboard Layout -->
<div class="flex min-h-screen bg-gray-100">

  <!-- Sidebar (Desktop) -->
  <aside class="hidden w-64 bg-gray-900 text-white lg:block">
    <div class="p-6">
      <h2 class="text-xl font-bold">Dashboard</h2>
    </div>
    <nav class="space-y-1 px-4">
      <a href="#" class="block rounded-lg bg-gray-800 px-4 py-2">Home</a>
      <a href="#" class="block rounded-lg px-4 py-2 hover:bg-gray-800">Analytics</a>
      <a href="#" class="block rounded-lg px-4 py-2 hover:bg-gray-800">Settings</a>
    </nav>
  </aside>

  <!-- Main Content -->
  <div class="flex-1">
    <!-- Header -->
    <header class="flex items-center justify-between bg-white px-6 py-4 shadow-sm">
      <h1 class="text-lg font-semibold">Dashboard</h1>
      <div class="flex items-center gap-4">
        <input
          type="search"
          placeholder="Search..."
          class="rounded-lg border px-3 py-2 text-sm"
        />
        <div class="h-8 w-8 rounded-full bg-blue-500"></div>
      </div>
    </header>

    <!-- Stats Grid -->
    <main class="p-6">
      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <div class="rounded-xl bg-white p-6 shadow-sm">
          <p class="text-sm text-gray-500">Total Users</p>
          <p class="mt-1 text-2xl font-bold">12,345</p>
        </div>
        <div class="rounded-xl bg-white p-6 shadow-sm">
          <p class="text-sm text-gray-500">Revenue</p>
          <p class="mt-1 text-2xl font-bold">$45,678</p>
        </div>
      </div>
    </main>
  </div>
</div>