Analytics Dashboard

<input type="checkbox" id="sidebar-toggle" class="peer hidden" />

<label
  for="sidebar-toggle"
  aria-hidden="true"
  class="fixed inset-0 z-30 hidden bg-gray-900/50 peer-checked:block lg:hidden"
></label>

<div
  class="fixed inset-y-0 start-0 z-40 flex w-64 -translate-x-full flex-col justify-between overflow-y-auto border-e border-gray-200 bg-white transition-transform duration-300 peer-checked:translate-x-0 lg:static lg:translate-x-0 lg:shrink-0"
>
  <div class="p-4">
    <span
      class="grid h-12 w-32 place-content-center rounded-lg bg-gray-100 text-sm text-gray-600"
    >
      Logo
    </span>

    <nav aria-label="Dashboard" class="mt-4">
      <ul class="space-y-1">
        <li>
          <a
            href="#"
            class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-900"
          >
            Overview
          </a>
        </li>

        <li>
          <a
            href="#"
            class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
          >
            Customers
          </a>
        </li>

        <li>
          <a
            href="#"
            class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
          >
            Orders
          </a>
        </li>

        <li>
          <a
            href="#"
            class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
          >
            Billing
          </a>
        </li>

        <li>
          <a
            href="#"
            class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
          >
            Settings
          </a>
        </li>
      </ul>
    </nav>
  </div>

  <div class="sticky inset-x-0 bottom-0 border-t border-gray-200">
    <a
      href="#"
      class="flex items-center gap-2 bg-white p-4 hover:bg-gray-50 hover:transition-colors"
    >
      <img
        alt=""
        src="https://images.unsplash.com/photo-1600486913747-55e5470d6f40?auto=format&fit=crop&q=80&w=1160"
        class="size-10 rounded-full object-cover"
      />

      <p class="text-xs text-gray-900">
        <strong class="block font-medium">Priya Natarajan</strong>

        <span>priya@orbitly.com</span>
      </p>
    </a>
  </div>
</div>

<div class="flex flex-1 flex-col overflow-y-auto">
  <header class="flex items-center justify-between border-b border-gray-200 bg-white px-6 py-4">
    <div class="flex items-center gap-4">
      <label
        for="sidebar-toggle"
        class="cursor-pointer rounded-md p-2 text-gray-600 transition-colors hover:bg-gray-100 lg:hidden"
      >
        <span class="sr-only">Toggle menu</span>

        <svg
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          class="size-5"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          stroke-width="2"
        >
          <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </label>

      <h1 class="text-lg font-semibold text-gray-900">Overview</h1>
    </div>

    <a
      href="#"
      class="rounded-md bg-gray-900 px-4 py-2 text-sm font-medium text-white transition hover:bg-gray-800"
    >
      New report
    </a>
  </header>

  <main class="flex-1 space-y-6 p-6">
    <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
      <article class="flex flex-col gap-4 rounded-lg border border-gray-200 bg-white p-6">
        <div class="inline-flex gap-2 self-end rounded-sm bg-green-100 p-1 text-green-600">
          <svg
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            class="size-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
            />
          </svg>

          <span class="sr-only">Increase: </span>

          <span class="text-xs font-medium">12.4%</span>
        </div>

        <div>
          <strong class="block text-sm font-medium text-gray-600">Monthly revenue</strong>

          <p>
            <span class="text-2xl font-medium text-gray-900">$48,204</span>

            <span class="text-xs text-gray-600">from $42,910</span>
          </p>
        </div>
      </article>

      <article class="flex flex-col gap-4 rounded-lg border border-gray-200 bg-white p-6">
        <div class="inline-flex gap-2 self-end rounded-sm bg-green-100 p-1 text-green-600">
          <svg
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            class="size-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
            />
          </svg>

          <span class="sr-only">Increase: </span>

          <span class="text-xs font-medium">4.1%</span>
        </div>

        <div>
          <strong class="block text-sm font-medium text-gray-600">Active customers</strong>

          <p>
            <span class="text-2xl font-medium text-gray-900">2,318</span>

            <span class="text-xs text-gray-600">from 2,227</span>
          </p>
        </div>
      </article>

      <article class="flex flex-col gap-4 rounded-lg border border-gray-200 bg-white p-6">
        <div class="inline-flex gap-2 self-end rounded-sm bg-red-100 p-1 text-red-600">
          <svg
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            class="size-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M13 17h8m0 0V9m0 8l-8-8-4 4-6-6"
            />
          </svg>

          <span class="sr-only">Decrease: </span>

          <span class="text-xs font-medium">2.6%</span>
        </div>

        <div>
          <strong class="block text-sm font-medium text-gray-600">Churn rate</strong>

          <p>
            <span class="text-2xl font-medium text-gray-900">1.8%</span>

            <span class="text-xs text-gray-600">from 2.1%</span>
          </p>
        </div>
      </article>
    </div>

    <div class="rounded-lg border border-gray-200 bg-white p-6">
      <h2 class="text-sm font-medium text-gray-900">Recent orders</h2>

      <div class="mt-4 overflow-x-auto">
        <table class="min-w-full divide-y-2 divide-gray-200">
          <thead class="ltr:text-left rtl:text-right">
            <tr class="*:font-medium *:text-gray-900">
              <th class="px-3 py-2 whitespace-nowrap">Customer</th>
              <th class="px-3 py-2 whitespace-nowrap">Order</th>
              <th class="px-3 py-2 whitespace-nowrap">Status</th>
              <th class="px-3 py-2 whitespace-nowrap">Amount</th>
            </tr>
          </thead>

          <tbody class="divide-y divide-gray-200">
            <tr class="*:text-gray-900 *:first:font-medium">
              <td class="px-3 py-2 whitespace-nowrap">Nandor the Relentless</td>
              <td class="px-3 py-2 whitespace-nowrap">#3921</td>
              <td class="px-3 py-2 whitespace-nowrap">
                <span class="rounded-full bg-green-100 px-2.5 py-0.5 text-xs text-green-700">
                  Paid
                </span>
              </td>
              <td class="px-3 py-2 whitespace-nowrap">$412.00</td>
            </tr>

            <tr class="*:text-gray-900 *:first:font-medium">
              <td class="px-3 py-2 whitespace-nowrap">Laszlo Cravensworth</td>
              <td class="px-3 py-2 whitespace-nowrap">#3920</td>
              <td class="px-3 py-2 whitespace-nowrap">
                <span class="rounded-full bg-yellow-100 px-2.5 py-0.5 text-xs text-yellow-700">
                  Pending
                </span>
              </td>
              <td class="px-3 py-2 whitespace-nowrap">$128.50</td>
            </tr>

            <tr class="*:text-gray-900 *:first:font-medium">
              <td class="px-3 py-2 whitespace-nowrap">Nadja</td>
              <td class="px-3 py-2 whitespace-nowrap">#3919</td>
              <td class="px-3 py-2 whitespace-nowrap">
                <span class="rounded-full bg-green-100 px-2.5 py-0.5 text-xs text-green-700">
                  Paid
                </span>
              </td>
              <td class="px-3 py-2 whitespace-nowrap">$894.20</td>
            </tr>

            <tr class="*:text-gray-900 *:first:font-medium">
              <td class="px-3 py-2 whitespace-nowrap">Guillermo de la Cruz</td>
              <td class="px-3 py-2 whitespace-nowrap">#3918</td>
              <td class="px-3 py-2 whitespace-nowrap">
                <span class="rounded-full bg-red-100 px-2.5 py-0.5 text-xs text-red-700">
                  Refunded
                </span>
              </td>
              <td class="px-3 py-2 whitespace-nowrap">$56.00</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </main>
</div>