Reproductor de audio brutalista
Un componente de reproductor de audio brutalista con diseño receptivo, compatibilidad con modo oscuro y sin JavaScript.
Código HTML
<div class="min-h-screen bg-stone-100 dark:bg-black p-8 flex items-center justify-center">
<div class="w-full max-w-md bg-white dark:bg-stone-900 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] border-[4px] border-black dark:border-white overflow-hidden">
<div class="p-6">
<h3 class="text-2xl font-bold text-black dark:text-white mb-4 border-b-4 border-black dark:border-white pb-2">Now Playing</h3>
<div class="flex items-center mb-6">
<img class="w-16 h-16 object-cover border-4 border-black dark:border-white mr-4" src="https://picsum.photos/100/100" alt="Album Art">
<div>
<p class="text-xl font-semibold text-black dark:text-white">Track Title</p>
<p class="text-black dark:text-white">Artist Name</p>
</div>
</div>
<div class="mb-6">
<div class="h-4 bg-gray-300 dark:bg-stone-700 border-2 border-black dark:border-white"></div>
</div>
<div class="flex justify-between text-black dark:text-white mb-6">
<span>0:00</span>
<span>3:45</span>
</div>
<div class="flex justify-center space-x-6">
<button class="p-3 border-4 border-black dark:border-white text-black dark:text-white shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] font-bold">Prev</button>
<button class="p-3 border-4 border-black dark:border-white text-black dark:text-white shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] font-bold">Play</button>
<button class="p-3 border-4 border-black dark:border-white text-black dark:text-white shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] font-bold">Next</button>
</div>
</div>
</div>
</div>Componentes relacionados
Componente del reproductor de audio
Componente de reproductor de audio de morfismo de vidrio complejo para redes sociales con combinación de colores triádica, diseño receptivo y compatibilidad con temas oscuros.
Memphis_Audio_Player_Component
Un componente de reproductor de audio receptivo inspirado en el diseño de Memphis, con formas geométricas audaces y colores neutros cálidos, con soporte para modo oscuro.
Componente del reproductor de audio
Un componente de reproductor de audio complejo diseñado para un tablero, con diseño receptivo, compatibilidad con temas oscuros y microinteracciones atractivas.