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.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-900 p-4">
<div class="w-full max-w-md bg-gray-200 dark:bg-gray-800 rounded-xl p-6 shadow-xl dark:shadow-xl-dark">
<div class="flex flex-col items-center">
<div class="w-32 h-32 bg-gray-300 dark:bg-gray-700 rounded-full shadow-inner dark:shadow-inner-dark flex items-center justify-center">
<img src="https://picsum.photos/128" alt="Album Artwork" class="rounded-full w-full h-full object-cover">
</div>
<h3 class="mt-4 text-lg font-semibold text-gray-800 dark:text-gray-200">Song Title</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Artist Name - Album Name</p>
</div>
<div class="w-full mt-6">
<div class="flex items-center justify-between text-gray-600 dark:text-gray-400 text-xs">
<span>0:00</span>
<span>3:45</span>
</div>
<div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-2 mt-1 shadow-inner dark:shadow-inner-dark">
<div class="bg-blue-500 h-2 rounded-full" style="width: 30%;"></div>
</div>
</div>
<div class="flex items-center justify-around mt-8">
<button class="w-12 h-12 bg-gray-200 dark:bg-gray-800 rounded-full flex items-center justify-center shadow-neumorphic dark:shadow-neumorphic-dark">
<svg class="w-6 h-6 text-gray-700 dark:text-gray-300" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"></path>
</svg>
</button>
<button class="w-16 h-16 bg-gray-200 dark:bg-gray-800 rounded-full flex items-center justify-center shadow-neumorphic-lg dark:shadow-neumorphic-lg-dark">
<svg class="w-8 h-8 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path>
</svg>
</button>
<button class="w-12 h-12 bg-gray-200 dark:bg-gray-800 rounded-full flex items-center justify-center shadow-neumorphic dark:shadow-neumorphic-dark">
<svg class="w-6 h-6 text-gray-700 dark:text-gray-300" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button>
</div>
<div class="flex items-center mt-6">
<svg class="w-5 h-5 text-gray-600 dark:text-gray-400 mr-2" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M9.384 4.464A1 1 0 0110 4v12a1 1 0 01-1.707.707L6 14H3a1 1 0 01-1-1V7a1 1 0 011-1h3l2.293-2.293a1 1 0 011.091-.243zM14.003 7.77a.75.75 0 01.412 1.367l-3.495 1.896-.943-.943 3.496-1.897z" clip-rule="evenodd"></path>
</svg>
<div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-2 shadow-inner dark:shadow-inner-dark">
<div class="bg-blue-500 h-2 rounded-full" style="width: 60%;"></div>
</div>
<svg class="w-5 h-5 text-gray-600 dark:text-gray-400 ml-2" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M17.707 9.293a1 1 0 010 1.414l-b b a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414zm-1.414 4.242a1 1 0 10-1.414 1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
<path d="M1.723 13.863a1 1 0 00-.723.451l-1 1.5A1 1 0 001 18.122V19a1 1 0 001 1h1a1 1 0 001-1v-.878A1 1 0 003.723 18L3 16.863a1 1 0 00-.723-.451zM4 5a1 1 0 00-1 1v8a1 1 0 001 1h2a1 1 0 001-1V6a1 1 0 00-1-1H4z" clip-rule="evenodd"></path>
</svg>
</div>
</div>
</div>
<style>
.shadow-xl-dark {
box-shadow: 7px 7px 15px #1f1f1f, -7px -7px 15px #2d2d2d;
}
.shadow-inner-dark {
box-shadow: inset 5px 5px 10px #1f1f1f, inset -5px -5px 10px #2d2d2d;
}
.shadow-neumorphic {
box-shadow: 5px 5px 10px #b0b0b0, -5px -5px 10px #ffffff;
}
.shadow-neumorphic-dark {
box-shadow: 5px 5px 10px #1f1f1f, -5px -5px 10px #2d2d2d;
}
.shadow-neumorphic-lg {
box-shadow: 8px 8px 15px #b0b0b0, -8px -8px 15px #ffffff;
}
.shadow-neumorphic-lg-dark {
box-shadow: 8px 8px 15px #1f1f1f, -8px -8px 15px #2d2d2d;
}
</style>Componentes relacionados
Reproductor de audio retro
Componente que implementa un reproductor de audio con diseño retro / vintage, efectos responsivos y soporte para temas oscuros.
Reproductor de audio retro
Componente de reproductor de audio con diseño retro/vintage, combinación de colores pastel, complejidad compleja, propósito de redes sociales, receptivo, compatibilidad con temas oscuros, HTML solo con Tailwind CSS
Reproductor de audio skeuomórfico
Un componente de reproductor de audio diseñado con un estilo skeuomórfico, una combinación de colores pastel y una interfaz compleja. Es compatible con el modo oscuro y es responsivo, adecuado para sitios de comercio electrónico.