<div class="card">
  <img src="https://images.pexels.com/photos/5331154/pexels-photo-5331154.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Album cover" class="aspect-square object-cover rounded-t-xl" />
  <div class="card-content grid gap-6">
    <div class="grid gap-2 text-center">
      <h3 class="text-lg/6 font-semibold">Midnight Dreams</h3>
      <p class="text-sm/6 text-muted-foreground">Luna Eclipse</p>
    </div>
    <div class="grid gap-2">
      <div class="h-1 bg-muted rounded-full overflow-hidden"><div class="h-full w-1/3 bg-primary rounded-full"></div></div>
      <div class="flex justify-between text-xs text-muted-foreground">
        <span>1:23</span>
        <span>3:45</span>
      </div>
    </div>
    <div class="flex items-center justify-center gap-4">
      <button class="btn btn-ghost btn-icon">
        <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-shuffle" aria-hidden="true">
          <path d="m18 14 4 4-4 4"></path>
          <path d="m18 2 4 4-4 4"></path>
          <path d="M2 18h1.973a4 4 0 0 0 3.3-1.7l5.454-8.6a4 4 0 0 1 3.3-1.7H22"></path>
          <path d="M2 6h1.972a4 4 0 0 1 3.6 2.2"></path>
          <path d="M22 18h-6.041a4 4 0 0 1-3.3-1.8l-.359-.45"></path>
        </svg>
      </button>
      <button class="btn btn-ghost btn-icon">
        <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-skip-back" aria-hidden="true">
          <path d="M17.971 4.285A2 2 0 0 1 21 6v12a2 2 0 0 1-3.029 1.715l-9.997-5.998a2 2 0 0 1-.003-3.432z"></path>
          <path d="M3 20V4"></path>
        </svg>
      </button>
      <button class="btn btn-icon">
        <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-pause size-5" aria-hidden="true">
          <rect x="14" y="3" width="5" height="18" rx="1"></rect>
          <rect x="5" y="3" width="5" height="18" rx="1"></rect>
        </svg>
      </button>
      <button class="btn btn-ghost btn-icon">
        <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-skip-forward" aria-hidden="true">
          <path d="M21 4v16"></path>
          <path d="M6.029 4.285A2 2 0 0 0 3 6v12a2 2 0 0 0 3.029 1.715l9.997-5.998a2 2 0 0 0 .003-3.432z"></path>
        </svg>
      </button>
      <button class="btn btn-ghost btn-icon">
        <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-repeat" aria-hidden="true">
          <path d="m17 2 4 4-4 4"></path>
          <path d="M3 11v-1a4 4 0 0 1 4-4h14"></path>
          <path d="m7 22-4-4 4-4"></path>
          <path d="M21 13v1a4 4 0 0 1-4 4H3"></path>
        </svg>
      </button>
    </div>
  </div>
</div>