Music Player Card

<!--
  Day 111: Music player card

  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
-->

<!-- Music Player Card -->
<div
  class="mx-auto w-full max-w-sm rounded-3xl bg-white p-5 shadow-sm ring-8 shadow-slate-500/10 ring-slate-900/5"
>
  <!-- Album Art -->
  <div class="relative overflow-hidden rounded-2xl">
    <img
      src="https://images.unsplash.com/photo-1514525253161-7a46d19cd819?auto=format&fit=crop&w=800&h=800&q=80"
      alt="Album artwork showing a concert with colorful lights"
      class="aspect-square w-full object-cover"
    />
    <div class="absolute top-3 right-3 flex items-center gap-1.5">
      <button
        type="button"
        class="flex size-8 items-center justify-center rounded-full bg-white/90 text-zinc-700 shadow-sm backdrop-blur-sm hover:bg-white active:bg-zinc-100"
        aria-label="Add to favorites"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-heart-icon lucide-heart inline-block size-4 text-rose-500"
        >
          <path
            d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"
          />
        </svg>
      </button>
      <button
        type="button"
        class="flex size-8 items-center justify-center rounded-full bg-white/90 text-zinc-700 shadow-sm backdrop-blur-sm hover:bg-white active:bg-zinc-100"
        aria-label="More options"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-ellipsis-icon lucide-ellipsis inline-block size-4 text-zinc-700"
        >
          <circle cx="12" cy="12" r="1" />
          <circle cx="19" cy="12" r="1" />
          <circle cx="5" cy="12" r="1" />
        </svg>
      </button>
    </div>
  </div>
  <!-- END Album Art -->

  <!-- Track Info -->
  <div class="mt-4 flex items-start justify-between gap-3">
    <div class="min-w-0">
      <h3 class="truncate text-base font-semibold text-zinc-900">
        Neon Horizons
      </h3>
      <p class="truncate text-sm text-zinc-500">The Midnight Collective</p>
    </div>
    <div
      class="flex flex-none items-center gap-1 rounded-full bg-indigo-50 px-2 py-0.5 text-xs font-semibold text-indigo-600"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-music-icon lucide-music inline-block size-3 text-indigo-600"
      >
        <path d="M9 18V5l12-2v13" />
        <circle cx="6" cy="18" r="3" />
        <circle cx="18" cy="16" r="3" />
      </svg>
      <span>HiFi</span>
    </div>
  </div>
  <!-- END Track Info -->

  <!-- Progress Bar -->
  <div class="mt-4 flex flex-col gap-1.5">
    <div class="relative h-1.5 w-full overflow-hidden rounded-full bg-zinc-100">
      <div
        class="absolute inset-y-0 left-0 w-[38%] rounded-full bg-indigo-500"
        role="progressbar"
        aria-valuenow="38"
        aria-valuemin="0"
        aria-valuemax="100"
        aria-label="Track progress"
      ></div>
    </div>
    <div
      class="flex items-center justify-between text-xs font-medium text-zinc-400"
    >
      <span>1:24</span>
      <span>3:42</span>
    </div>
  </div>
  <!-- END Progress Bar -->

  <!-- Playback Controls -->
  <div class="mt-2 flex items-center justify-between">
    <!-- Repeat -->
    <button
      type="button"
      class="flex size-9 items-center justify-center rounded-full text-zinc-500 hover:text-indigo-600 active:text-indigo-700"
      aria-label="Repeat"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-repeat2-icon lucide-repeat-2 inline-block size-5"
      >
        <path d="m2 9 3-3 3 3" />
        <path d="M13 18H7a2 2 0 0 1-2-2V6" />
        <path d="m22 15-3 3-3-3" />
        <path d="M11 6h6a2 2 0 0 1 2 2v10" />
      </svg>
    </button>
    <!-- END Repeat -->

    <!-- Main Controls -->
    <div class="flex items-center gap-1">
      <!-- Previous -->
      <button
        type="button"
        class="flex size-10 items-center justify-center rounded-full text-zinc-600 hover:text-zinc-900 active:text-zinc-700"
        aria-label="Previous track"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-chevrons-left-icon lucide-chevrons-left inline-block size-6"
        >
          <path d="m11 17-5-5 5-5" />
          <path d="m18 17-5-5 5-5" />
        </svg>
      </button>
      <!-- END Previous -->

      <!-- Play -->
      <button
        type="button"
        class="flex size-14 items-center justify-center rounded-full bg-zinc-900 text-white shadow-lg hover:bg-zinc-700 active:bg-zinc-800"
        aria-label="Play"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-play-icon lucide-play inline-block size-7 translate-x-0.25 text-white"
        >
          <path
            d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"
          />
        </svg>
      </button>
      <!-- END Play -->

      <!-- Next -->
      <button
        type="button"
        class="flex size-10 items-center justify-center rounded-full text-zinc-600 hover:text-zinc-900 active:text-zinc-700"
        aria-label="Next track"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-chevrons-right-icon lucide-chevrons-right inline-block size-6"
        >
          <path d="m6 17 5-5-5-5" />
          <path d="m13 17 5-5-5-5" />
        </svg>
      </button>
      <!-- END Next -->
    </div>
    <!-- END Main Controls -->

    <!-- Music List -->
    <button
      type="button"
      class="flex size-9 items-center justify-center rounded-full text-zinc-500 hover:text-indigo-600 active:text-indigo-700"
      aria-label="Music List"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-list-music-icon lucide-list-music inline-block size-5"
      >
        <path d="M16 5H3" />
        <path d="M11 12H3" />
        <path d="M11 19H3" />
        <path d="M21 16V5" />
        <circle cx="18" cy="16" r="3" />
      </svg>
    </button>
    <!-- END Music List -->
  </div>
  <!-- END Playback Controls -->

  <!-- Volume -->
  <div class="mt-3 flex items-center gap-2.5">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="lucide lucide-volume1-icon lucide-volume-1 inline-block size-4 flex-none text-zinc-400"
    >
      <path
        d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z"
      />
      <path d="M16 9a5 5 0 0 1 0 6" />
    </svg>
    <div class="relative h-1.5 w-full overflow-hidden rounded-full bg-zinc-100">
      <div
        class="absolute inset-y-0 left-0 w-[35%] rounded-full bg-zinc-300"
        role="slider"
        aria-valuenow="35"
        aria-valuemin="0"
        aria-valuemax="100"
        aria-label="Volume"
        tabindex="0"
      ></div>
    </div>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="lucide lucide-volume1-icon lucide-volume-1 inline-block size-4 flex-none text-zinc-400"
    >
      <path
        d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z"
      />
      <path d="M16 9a5 5 0 0 1 0 6" />
    </svg>
  </div>
  <!-- END Volume -->
</div>
<!-- END Music Player Card -->