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.
Código HTML
<div class="flex justify-center items-center min-h-screen bg-gray-200 dark:bg-gray-800">
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-6 backdrop-blur-lg bg-opacity-30 border border-gray-300 dark:border-gray-600">
<img src="https://picsum.photos/200/100" alt="Album Art" class="rounded-lg mb-4">
<div class="flex flex-col items-center">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Song Title</h2>
<p class="text-sm text-gray-600 dark:text-gray-400">Artist Name</p>
</div>
<div class="w-full my-4">
<input type="range" class="w-full h-1 bg-gray-300 rounded-lg appearance-none cursor-pointer dark:bg-gray-600" min="0" max="100" value="50">
</div>
<div class="flex justify-between">
<button class="bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg focus:outline-none">Play</button>
<button class="bg-red-500 text-white font-semibold py-2 px-4 rounded-lg focus:outline-none">Stop</button>
</div>
</div>
</div>Componentes relacionados
Reproductor de audio Glassmorphism
Reproductor de audio Glassmorphism con colores vibrantes para el tablero, responsivo con soporte para modo oscuro. Sin JavaScript.
Componente del reproductor de audio
Un componente de reproductor de audio receptivo con microinteracciones, combinación de colores en tonos tierra, complejidad moderada y compatibilidad con temas oscuros, adecuado para sitios web comerciales / corporativos.
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.