Reproductor de audio retro
Componente que implementa un reproductor de audio con diseño retro / vintage, efectos responsivos y soporte para temas oscuros.
Código HTML
<div
class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900"
>
<div
class="w-full max-w-md p-6 rounded-lg shadow-xl bg-white dark:bg-gray-800 transform transition-all duration-300 hover:scale-105"
>
<div class="flex items-center justify-between mb-6">
<div class="text-2xl font-bold text-gray-800 dark:text-gray-200">Now Playing</div>
<button
class="p-2 rounded-full text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6"
/>
</svg>
</button>
</div>
<div class="flex items-center mb-6">
<img
class="w-16 h-16 rounded-md mr-4 object-cover"
src="https://picsum.photos/id/1011/150/150"
alt="Album Art"
/>
<div>
<div class="text-xl font-semibold text-gray-800 dark:text-gray-200">Song Title</div>
<div class="text-gray-600 dark:text-gray-400">Artist Name</div>
</div>
</div>
<div class="mb-4">
<div class="w-full h-2 bg-gray-300 rounded-full mb-2 overflow-hidden">
<div class="h-full bg-blue-500" style="width: 50%"></div>
</div>
<div class="flex justify-between text-sm text-gray-600 dark:text-gray-400">
<span>2:30</span>
<span>4:50</span>
</div>
</div>
<div class="flex items-center justify-center space-x-6">
<button
class="p-3 rounded-full text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
/>
</svg>
</button>
<button
class="p-4 rounded-full bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transform transition-transform duration-200 hover:scale-110"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-8 w-8"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M14.752 11.168l-3.197 2.132A1 1 0 0110 13.803V9.197a1 1 0 011.555-.832l3.197 2.132a1 1 0 010 1.664z"
/>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</button>
<button
class="p-3 rounded-full text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 rotate-180"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
/>
</svg>
</button>
</div>
</div>
</div>Componentes relacionados
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.
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.
Reproductor de audio de neumorfismo
Un componente de reproductor de audio de estilo Neumorphism con controles de reproducción, pausa, salto y volumen, diseñado para sitios web empresariales. Cuenta con una barra de progreso, el título de la canción, el artista y la carátula del álbum. Incluye diseño responsivo y soporte para el modo oscuro usando Tailwind CSS.