Composant de lecteur audio
Un composant de lecteur audio complexe conçu pour un tableau de bord, doté d’un design réactif, d’une prise en charge des thèmes sombres et de micro-interactions attrayantes.
HTML Code
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-md mx-auto">
<div class="flex items-center justify-between mb-4">
<img src="https://picsum.photos/100/100" alt="Album Art" class="rounded-lg w-16 h-16">
<div class="flex flex-col ml-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Song Title</h2>
<p class="text-gray-600 dark:text-gray-400">Artist Name</p>
</div>
</div>
<div class="flex flex-col items-center mb-4">
<div class="mb-2">
<input type="range" min="0" max="100" value="50" class="appearance-none w-full h-2 bg-gray-300 dark:bg-gray-700 rounded-lg cursor-pointer">
</div>
<div class="flex justify-center items-center space-x-4">
<button class="bg-pink-500 hover:bg-pink-400 dark:bg-pink-700 dark:hover:bg-pink-600 text-white font-bold py-2 px-4 rounded-full transition ease-in-out duration-150">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>
</button>
<button class="bg-indigo-500 hover:bg-indigo-400 dark:bg-indigo-700 dark:hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded-full transition ease-in-out duration-150">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.364 6.364a3 3 0 003.364 4.636l6.364-6.364a3 3 0 00-4.636-4.636z" />
</svg>
</button>
<button class="bg-yellow-500 hover:bg-yellow-400 dark:bg-yellow-700 dark:hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded-full transition ease-in-out duration-150">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5h6m-1 14h-4m2-6h4m-5 0H8m1-6h2m8-2v12a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h12a2 2 0 012 2z" />
</svg>
</button>
</div>
</div>
<div class="flex items-center justify-between">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-10 h-10 mr-2">
<div class="text-gray-800 dark:text-gray-200">User Name</div>
<div class="text-gray-600 dark:text-gray-400">00:00</div>
</div>
</div>Composants associés
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.
Composant de lecteur audio
Un composant de lecteur audio simple conçu avec un style skeuomorphe, utilisant une palette de couleurs en niveaux de gris et prenant en charge le mode sombre.