Reproductor de audio Glassmorphism
Reproductor de audio Glassmorphism con colores vibrantes para el tablero, responsivo con soporte para modo oscuro. Sin JavaScript.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-200 via-pink-200 to-red-200 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 p-4">
<div class="bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl p-6 shadow-lg max-w-sm w-full border border-white border-opacity-20 dark:border-gray-600 dark:border-opacity-20">
<div class="flex items-center space-x-4 mb-4">
<img class="w-16 h-16 rounded-lg shadow-md" src="https://picsum.photos/id/1040/80/80" alt="Album Art">
<div class="flex-1">
<h3 class="text-xl font-bold text-indigo-800 dark:text-indigo-300">Ocean Waves</h3>
<p class="text-sm text-purple-700 dark:text-purple-300">Relaxation Sounds</p>
</div>
</div>
<div class="relative mb-4">
<div class="w-full bg-purple-200 rounded-full h-2 dark:bg-gray-600">
<div class="bg-gradient-to-r from-indigo-500 to-pink-500 h-2 rounded-full" style="width: 70%;"></div>
</div>
<div class="flex justify-between text-xs text-purple-800 dark:text-purple-200 mt-1">
<span>2:10</span>
<span>3:05</span>
</div>
</div>
<div class="flex items-center justify-center space-x-6">
<button class="text-purple-800 dark:text-purple-200 focus:outline-none">
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 5V.3c-4.9 1.1-8.5 5.7-8.5 11.2s3.6 10.1 8.5 11.2V19c-3.7 0-6.7-3-6.7-6.7S8.3 5.3 12 5zm0 14c3.9 0 7-3.1 7-7s-3.1-7-7-7v14zM16 12c0 2.2-1.8 4-4 4s-4-1.8-4-4 1.8-4 4-4 4 1.8 4 4z"></path>
</svg>
</button>
<button class="bg-gradient-to-r from-indigo-600 to-pink-600 text-white p-3 rounded-full shadow-lg focus:outline-none transform hover:scale-105 transition duration-300">
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"></path>
</svg>
</button>
<button class="text-purple-800 dark:text-purple-200 focus:outline-none">
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 5V.3c-4.9 1.1-8.5 5.7-8.5 11.2s3.6 10.1 8.5 11.2V19c-3.7 0-6.7-3-6.7-6.7S8.3 5.3 12 5zm0 14c3.9 0 7-3.1 7-7s-3.1-7-7-7v14zM16 12c0 2.2-1.8 4-4 4s-4-1.8-4-4 1.8-4 4-4 4 1.8 4 4z"></path>
</svg>
</button>
</div>
</div>
</div>Componentes relacionados
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.
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.
Retro_Gaming_Audio_Player
Un componente de reproductor de audio de temática retro/vintage diseñado para sitios web de juegos, con una combinación de colores complementaria, un diseño receptivo y compatibilidad con el modo oscuro. Imita una estética de los años 80/90 con una cinta de casete visual.