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 skeuomorphe
Un composant de lecteur audio conçu avec un style Skeuomorphic, une palette de couleurs pastel et une interface complexe. Il prend en charge le mode sombre et est réactif, adapté aux sites de commerce électronique.
Luxury_Medical_Audio_Player
Un composant de lecteur audio complexe, réactif et luxueux pour les applications de santé, doté d’une typographie sophistiquée, de palettes de couleurs raffinées (triadiques) et d’une prise en charge du mode sombre.
3D_Forest_Audio_Player
Un composant de lecteur audio réactif avec des éléments de conception 3D, utilisant une palette de couleurs forêt/vert, adapté aux plates-formes éducatives prenant en charge le mode sombre.