<div class="card w-full max-w-sm">
  <img
    src="https://cdn.gufo.dev/stockphotos/f5ddf336.webp"
    alt="Album cover"
    class="aspect-square object-cover rounded-t-card w-full"
  />
  <div class="card-content grid gap-6">
    <div class="text-center">
      <h3 class="text-lg font-semibold tracking-tight">Midnight Dreams</h3>
      <p class="text-sm/6 text-muted-foreground mt-2">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" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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-primary btn-icon">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>