Icon Grid App Launcher

<!--
  An app-launcher grid menu. role="menu" with role="menuitem" tiles; because the
  layout is a grid, Left/Right move by one and Up/Down move by a full row. Shown
  open with a 3-column grid.
-->
<div class="relative inline-block">
  <button type="button" aria-haspopup="menu" aria-expanded="true" aria-label="Apps" class="flex h-10 w-10 items-center justify-center rounded-lg text-gray-600 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 dark:hover:text-gray-100 dark:focus-visible:ring-blue-400">
    <svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="5" cy="5" r="2"/><circle cx="12" cy="5" r="2"/><circle cx="19" cy="5" r="2"/><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/><circle cx="5" cy="19" r="2"/><circle cx="12" cy="19" r="2"/><circle cx="19" cy="19" r="2"/></svg>
  </button>
  <div role="menu" aria-label="Apps" class="absolute right-0 top-[calc(100%+0.5rem)] z-20 grid w-64 grid-cols-3 gap-1 rounded-2xl border border-gray-200 bg-white p-2 shadow-xl dark:border-gray-700 dark:bg-gray-900">
    <button type="button" role="menuitem" class="flex flex-col items-center gap-1.5 rounded-xl p-2 text-center hover:bg-gray-100 focus-visible:bg-gray-100 focus-visible:outline-none dark:hover:bg-gray-800 dark:focus-visible:bg-gray-800">
      <span class="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-sky-500 to-blue-600 text-sm font-bold text-white" aria-hidden="true">M</span>
      <span class="text-xs font-medium text-gray-700 dark:text-gray-300">Mail</span>
    </button>
    <button type="button" role="menuitem" class="flex flex-col items-center gap-1.5 rounded-xl p-2 text-center hover:bg-gray-100 focus-visible:bg-gray-100 focus-visible:outline-none dark:hover:bg-gray-800 dark:focus-visible:bg-gray-800">
      <span class="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-rose-500 to-red-600 text-sm font-bold text-white" aria-hidden="true">C</span>
      <span class="text-xs font-medium text-gray-700 dark:text-gray-300">Calendar</span>
    </button>
    <button type="button" role="menuitem" class="flex flex-col items-center gap-1.5 rounded-xl p-2 text-center hover:bg-gray-100 focus-visible:bg-gray-100 focus-visible:outline-none dark:hover:bg-gray-800 dark:focus-visible:bg-gray-800">
      <span class="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-amber-400 to-orange-500 text-sm font-bold text-white" aria-hidden="true">D</span>
      <span class="text-xs font-medium text-gray-700 dark:text-gray-300">Drive</span>
    </button>
  </div>
</div>