Componente del reproductor de audio
Un componente de reproductor de audio brutalista con una combinación de colores triádica y una complejidad moderada, adecuado para un tablero. Cuenta con un diseño responsivo con soporte para temas oscuros, implementado con Tailwind CSS.
Código HTML
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
<div class="bg-red-500 dark:bg-red-800 p-6 shadow-2xl border-4 border-black dark:border-white w-full max-w-md">
<div class="flex justify-between items-center mb-4 border-b-4 border-black dark:border-white pb-2">
<h2 class="text-2xl md:text-3xl font-extrabold text-black dark:text-white uppercase tracking-wider">Now Playing</h2>
<div class="text-black dark:text-white text-lg font-bold">🔊</div>
</div>
<div class="flex items-center space-x-4 mb-6">
<div class="w-20 h-20 bg-blue-500 dark:bg-blue-800 flex-shrink-0 border-2 border-black dark:border-white overflow-hidden">
<img src="https://picsum.photos/80/80?random=1" alt="Album Art" class="w-full h-full object-cover grayscale">
</div>
<div class="flex-grow">
<h3 class="text-xl md:text-2xl font-bold text-black dark:text-white uppercase leading-tight">Track Title Goes Here</h3>
<p class="text-md md:text-lg text-black dark:text-white font-medium">Artist Name</p>
</div>
</div>
<div class="mb-6">
<div class="w-full bg-black dark:bg-white h-4 mb-2 relative border-2 border-black dark:border-white">
<div class="bg-yellow-500 dark:bg-yellow-400 h-full" style="width: 60%;"></div>
<div class="absolute -right-1 top-1/2 -translate-y-1/2 w-6 h-6 bg-black dark:bg-white border-2 border-black dark:border-white"></div>
</div>
<div class="flex justify-between text-black dark:text-white text-sm font-semibold">
<span>2:30</span>
<span>-1:45</span>
</div>
</div>
<div class="grid grid-cols-3 gap-4 border-t-4 border-black dark:border-white pt-4">
<button class="bg-black dark:bg-white text-yellow-500 dark:text-yellow-400 p-3 text-lg md:text-xl font-bold border-2 border-black dark:border-white flex items-center justify-center transform active:scale-95 transition-transform duration-100">
⏪
</button>
<button class="bg-yellow-500 dark:bg-yellow-400 text-black dark:text-white p-3 text-lg md:text-xl font-bold border-2 border-black dark:border-white flex items-center justify-center transform active:scale-95 transition-transform duration-100">
▶
</button>
<button class="bg-black dark:bg-white text-yellow-500 dark:text-yellow-400 p-3 text-lg md:text-xl font-bold border-2 border-black dark:border-white flex items-center justify-center transform active:scale-95 transition-transform duration-100">
⏩
</button>
</div>
<div class="mt-6 pt-4 border-t-4 border-black dark:border-white">
<div class="flex justify-between items-center mb-2">
<span class="text-black dark:text-white font-bold text-sm">Volume</span>
<span class="text-black dark:text-white text-sm">75%</span>
</div>
<div class="w-full bg-black dark:bg-white h-3 relative border-2 border-black dark:border-white">
<div class="bg-blue-500 dark:bg-blue-800 h-full" style="width: 75%;"></div>
<div class="absolute -right-1 top-1/2 -translate-y-1/2 w-5 h-5 bg-black dark:bg-white border-2 border-black dark:border-white"></div>
</div>
</div>
</div>
</div>
Componentes relacionados
Reproductor de audio neumórfico
Un simple componente de reproductor de audio neumórfico con un esquema de color de tonos tierra para un tablero, construido con Tailwind CSS. Es compatible con el diseño responsivo y el tema oscuro.
Componente del reproductor de audio
Un componente de reproductor de audio sensible diseñado con el estilo Glassmorphism, con un aspecto similar al vidrio esmerilado y soporte para el modo oscuro.
Reproductor de audio retro
Componente de reproductor de audio con diseño retro/vintage, combinación de colores pastel, complejidad compleja, propósito de redes sociales, receptivo, compatibilidad con temas oscuros, HTML solo con Tailwind CSS