Labeled Sections Sidebar

<aside class="flex w-64 flex-col gap-5 border-r border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-900">
  <!-- Each group's <ul> is tied to its heading via aria-labelledby, so the label is a real group name, not just styled text. -->
  <nav aria-label="Sidebar">
    <p id="grp-main" class="px-3 pb-1 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Main</p>
    <ul aria-labelledby="grp-main" class="flex flex-col gap-0.5">
      <li><a href="/dashboard" aria-current="page" class="block rounded-md px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 aria-[current=page]:bg-blue-50 aria-[current=page]:text-blue-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:aria-[current=page]:bg-blue-900 dark:aria-[current=page]:text-blue-200">Dashboard</a></li>
      <li><a href="/projects" class="block rounded-md px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-gray-300 dark:hover:bg-gray-800">Projects</a></li>
    </ul>
  </nav>
  <nav aria-label="Account">
    <p id="grp-account" class="px-3 pb-1 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Account</p>
    <ul aria-labelledby="grp-account" class="flex flex-col gap-0.5">
      <li><a href="/billing" class="block rounded-md px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-gray-300 dark:hover:bg-gray-800">Billing</a></li>
    </ul>
  </nav>
</aside>