Загрузка...
UI-карточка музыкального плейлиста: обложка, предпрослушивание треков, кнопки плей/лайк. Адаптивный дизайн.
<div class="w-full max-w-sm ring-1 ring-transparent hover:ring-blue-500/30 focus-within:ring-blue-500/40 shadow-[0_20px_60px_-15px_rgba(0,0,0,.8)] overflow-hidden transition-all duration-700 bg-gray-900/30 border-white/10 border rounded-3xl shadow-inner backdrop-blur-lg">
<style>@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');</style>
<div class="flex gap-2 bg-white/10 border-white/5 border-b pt-3 pr-5 pb-3 pl-5 items-center">
<span class="text-xl tracking-tight font-inter text-white">Curated Mix</span>
<span class="text-xs text-white/60 ml-auto font-inter">24 Tracks</span>
</div>
<div class="relative">
<img src="https://images.unsplash.com/photo-1619472376731-3ca648a34b69?w=800&q=80" alt="Outrun Synthwave playlist cover" class="w-full h-44 object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent"></div>
<button aria-label="Play Playlist" class="absolute bottom-4 right-4 p-3 rounded-full bg-blue-500 hover:bg-blue-400 transition focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-blue-500/40 text-white">
<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="w-5 h-5">
<polygon points="6 3 20 12 6 21 6 3"></polygon>
</svg>
</button>
</div>
<div class="pt-5 pr-5 pb-5 pl-5 space-y-6">
<div>
<h3 class="text-lg leading-tight tracking-tight font-inter text-white">Outrun Synthwave</h3>
<p class="text-sm text-white/60 font-inter">A neon-drenched ride through pulsating retro beats.</p>
</div>
<ol class="space-y-3">
<li class="flex items-center gap-2">
<span class="text-xs text-white/60 font-inter">01</span>
<div class="flex-1 truncate">
<span class="tracking-tight font-inter text-white">Midnight City Lights</span>
<span class="text-white/50 font-inter">· Pulse Engine</span>
</div>
<span class="text-xs text-white/50 font-inter">3:45</span>
</li>
<li class="flex items-center gap-2">
<span class="text-xs text-white/60 font-inter">02</span>
<div class="flex-1 truncate">
<span class="tracking-tight font-inter text-white">Chrome Horizon</span>
<span class="text-white/50 font-inter">· Neon Run</span>
</div>
<span class="text-xs text-white/50 font-inter">4:01</span>
</li>
<li class="flex items-center gap-2">
<span class="text-xs text-white/60 font-inter">03</span>
<div class="flex-1 truncate">
<span class="tracking-tight font-inter text-white">Radiant Rush</span>
<span class="text-white/50 font-inter">· Solar Nights</span>
</div>
<span class="text-xs text-white/50 font-inter">3:28</span>
</li>
</ol>
<div class="flex items-center gap-3 pt-2 border-t border-white/5">
<button class="flex-1 inline-flex items-center justify-center gap-2 rounded-lg bg-blue-500 hover:bg-blue-400 transition text-sm font-semibold px-4 py-2 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-blue-500/40 text-white">
<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="w-4 h-4">
<path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path>
</svg>
<span class="font-inter">Like</span>
</button>
<button aria-label="More options for playlist" class="p-2 rounded-lg hover:bg-white/5 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/60 text-white">
<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="w-5 h-5">
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
</div>
</div>
</div>