Lecteur audio Neumorphism
Composant de lecteur audio de style Neumorphism avec commandes de lecture, de pause, de saut et de volume, conçu pour les sites Web d’entreprise. Comprend une barre de progression, le titre de la chanson, l’artiste et la pochette de l’album. Comprend un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.
HTML Code
<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>Composants associés
Lecteur audio brutaliste
Un composant de lecteur audio brutaliste avec un design réactif, une prise en charge du mode sombre et sans JavaScript.
Composant de lecteur audio
Un composant de lecteur audio réactif avec des micro-interactions, une palette de couleurs de terre, une complexité modérée et une prise en charge du thème sombre, adapté aux sites Web d’entreprise.
Lecteur audio rétro
Composant Implémentation d’un lecteur audio avec un design rétro/vintage, des effets réactifs et la prise en charge du thème sombre.