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.
HTML Code
<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>Composants associés
Lecteur audio rétro
Composant de lecteur audio avec design rétro/vintage, palette de couleurs pastel, complexité complexe, objectif des médias sociaux, réactif, prise en charge du thème sombre, HTML uniquement avec CSS Tailwind
Lecteur audio neumorphe
Un composant simple de lecteur audio neumorphe avec un schéma de couleurs Earth Tones pour un tableau de bord, construit avec Tailwind CSS. Il prend en charge le design réactif et le thème sombre.