Componente del reproductor de audio Cyberpunk
Un componente de reproducción de audio simple y receptivo con una estética cyberpunk futurista que utiliza un esquema de color púrpura / violeta, adecuado para exhibiciones de portafolios. Incluye soporte para modo oscuro.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-gray-900 dark:bg-black p-4">
<div class="w-full max-w-sm rounded-lg overflow-hidden shadow-2xl transform hover:scale-105 transition duration-300 ease-in-out bg-gradient-to-br from-purple-900 to-indigo-900 dark:from-purple-950 dark:to-indigo-950 border border-purple-700 dark:border-indigo-800">
<div class="relative">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=1" alt="Album Artwork">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
<button class="p-4 rounded-full bg-purple-500 text-white shadow-lg transform hover:scale-110 active:scale-95 transition duration-200 ease-in-out focus:outline-none focus:ring-4 focus:ring-purple-400 focus:ring-opacity-75">
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M8 5v14l11-7z"></path>
</svg>
</button>
</div>
</div>
<div class="p-4 text-white">
<h3 class="text-xl font-bold text-purple-200 dark:text-purple-300 mb-1">Neon Dreams</h3>
<p class="text-sm text-purple-300 dark:text-purple-400">Synthwave Artist</p>
<div class="mt-4">
<div class="w-full bg-purple-800 rounded-full h-2.5 dark:bg-purple-900">
<div class="bg-purple-400 h-2.5 rounded-full" style="width: 65%;"></div>
</div>
<div class="flex justify-between text-xs mt-2 text-purple-300 dark:text-purple-400">
<span>0:45</span>
<span>3:20</span>
</div>
</div>
<div class="flex justify-around items-center mt-6 text-purple-300 dark:text-purple-400">
<button class="p-2 focus:outline-none hover:text-purple-100 transition-colors duration-200">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"></path>
</svg>
</button>
<button class="p-2 focus:outline-none hover:text-purple-100 transition-colors duration-200">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M6 18V6h3v12H6zm5 0V6h3v12h-3zm5 0V6h3v12h-3z"></path>
</svg>
</button>
<button class="p-2 focus:outline-none hover:text-purple-100 transition-colors duration-200">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm2 14.5V9.5l-6 4.5 6 4.5z"></path>
</svg>
</button>
</div>
</div>
</div>
</div>Componentes relacionados
Reproductor de audio de lujo/premium
Un componente de reproductor de audio simple y elegante diseñado para plataformas de foros o comunidades, con un estilo lujoso/premium con un esquema de color otoñal y una capacidad de respuesta total con soporte para modo oscuro.
Componente del reproductor de audio
Un componente de reproductor de audio simple diseñado con un estilo skeuomórfico, que utiliza un esquema de color en escala de grises y admite el modo 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.