Dock Navigation

<!--
  Day 47: Dock Navigation

  Created by John Champ

  Founder of Pixelcave      -> https://pixelcave.com
  Building Tailkit          -> https://tailkit.com
  Let's connect on X        -> https://x.com/pixelcave_john
                on Bluesky  -> https://bsky.app/profile/pixelcave-john.bsky.social
-->

<!-- Dock Navigation -->
<div
  class="relative mx-auto w-full max-w-md rounded-3xl border border-zinc-200 bg-white ring-4 ring-zinc-300/25"
>
  <!-- Dock Bar -->
  <div class="flex flex-wrap items-center justify-center gap-2 p-4">
    <button
      type="button"
      class="group relative flex items-center justify-center"
    >
      <div
        class="absolute -top-8 hidden rounded-md bg-zinc-800/90 px-2 py-1 text-xs text-nowrap text-white backdrop-blur-sm group-hover:block"
      >
        Finder
      </div>
      <div
        class="flex size-12 items-center justify-center rounded-xl bg-gradient-to-b from-sky-100 to-blue-200 text-blue-600 transition hover:scale-110"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          aria-hidden="true"
          class="lucide lucide-folder-open inline-block size-6"
        >
          <path
            d="m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"
          />
        </svg>
      </div>
    </button>

    <button
      type="button"
      class="group relative flex items-center justify-center"
    >
      <div
        class="absolute -top-8 hidden rounded-md bg-zinc-800/90 px-2 py-1 text-xs text-nowrap text-white backdrop-blur-sm group-hover:block"
      >
        Safari
      </div>
      <div
        class="flex size-12 items-center justify-center rounded-xl bg-gradient-to-b from-amber-100 to-orange-200 text-orange-600 transition hover:scale-110"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          aria-hidden="true"
          class="lucide lucide-globe inline-block size-6"
        >
          <circle cx="12" cy="12" r="10" />
          <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
          <path d="M2 12h20" />
        </svg>
      </div>
    </button>

    <button
      type="button"
      class="group relative flex items-center justify-center"
    >
      <div
        class="absolute -top-8 hidden rounded-md bg-zinc-800/90 px-2 py-1 text-xs text-nowrap text-white backdrop-blur-sm group-hover:block"
      >
        Mail
      </div>
      <div
        class="flex size-12 items-center justify-center rounded-xl bg-gradient-to-b from-teal-100 to-sky-200 text-sky-600 transition hover:scale-110"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          aria-hidden="true"
          class="lucide lucide-mail inline-block size-6"
        >
          <rect width="20" height="16" x="2" y="4" rx="2" />
          <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
        </svg>
      </div>
    </button>

    <button
      type="button"
      class="group relative flex items-center justify-center"
    >
      <div
        class="absolute -top-8 hidden rounded-md bg-zinc-800/90 px-2 py-1 text-xs text-nowrap text-white backdrop-blur-sm group-hover:block"
      >
        FaceTime
      </div>
      <div
        class="flex size-12 items-center justify-center rounded-xl bg-gradient-to-b from-green-100 to-emerald-200 text-emerald-600 transition hover:scale-110"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          aria-hidden="true"
          class="lucide lucide-video inline-block size-6"
        >
          <path
            d="m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5"
          />
          <rect x="2" y="6" width="14" height="12" rx="2" />
        </svg>
      </div>
    </button>

    <button
      type="button"
      class="group relative flex items-center justify-center"
    >
      <div
        class="absolute -top-8 hidden rounded-md bg-zinc-800/90 px-2 py-1 text-xs text-nowrap text-white backdrop-blur-sm group-hover:block"
      >
        Messages
      </div>
      <div
        class="flex size-12 items-center justify-center rounded-xl bg-gradient-to-b from-pink-100 to-purple-200 text-purple-600 transition hover:scale-110"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          aria-hidden="true"
          class="lucide lucide-message-square inline-block size-6"
        >
          <path
            d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
          />
        </svg>
      </div>
    </button>

    <button
      type="button"
      class="group relative flex items-center justify-center"
    >
      <div
        class="absolute -top-8 hidden rounded-md bg-zinc-800/90 px-2 py-1 text-xs text-nowrap text-white backdrop-blur-sm group-hover:block"
      >
        Photos
      </div>
      <div
        class="flex size-12 items-center justify-center rounded-xl bg-gradient-to-b from-rose-100 to-red-200 text-red-600 transition hover:scale-110"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          aria-hidden="true"
          class="lucide lucide-image inline-block size-6"
        >
          <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
          <circle cx="9" cy="9" r="2" />
          <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
        </svg>
      </div>
    </button>

    <div class="mx-1 h-6 w-0.5 rounded-full bg-zinc-200/75"></div>

    <button
      type="button"
      class="group relative flex items-center justify-center"
    >
      <div
        class="absolute -top-8 hidden rounded-md bg-zinc-800/90 px-2 py-1 text-xs text-nowrap text-white backdrop-blur-sm group-hover:block"
      >
        Settings
      </div>
      <div
        class="flex size-12 items-center justify-center rounded-xl bg-gradient-to-b from-zinc-100 to-zinc-200 transition hover:scale-110"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          aria-hidden="true"
          class="lucide lucide-cog inline-block size-6"
        >
          <path d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z" />
          <path d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" />
          <path d="M12 2v2" />
          <path d="M12 22v-2" />
          <path d="m17 20.66-1-1.73" />
          <path d="M11 10.27 7 3.34" />
          <path d="m20.66 17-1.73-1" />
          <path d="m3.34 7 1.73 1" />
          <path d="M14 12h8" />
          <path d="M2 12h2" />
          <path d="m20.66 7-1.73 1" />
          <path d="m3.34 17 1.73-1" />
          <path d="m17 3.34-1 1.73" />
          <path d="m11 13.73-4 6.93" />
        </svg>
      </div>
    </button>
  </div>
  <!-- END Dock Bar -->
</div>
<!-- END Dock Navigation -->