Composant de lecteur audio
Un composant de lecteur audio brutaliste avec une palette de couleurs triadique et une complexité modérée, adapté à un tableau de bord. Il présente un design réactif avec la prise en charge du thème sombre, mis en œuvre avec Tailwind CSS.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
<div class="bg-red-500 dark:bg-red-800 p-6 shadow-2xl border-4 border-black dark:border-white w-full max-w-md">
<div class="flex justify-between items-center mb-4 border-b-4 border-black dark:border-white pb-2">
<h2 class="text-2xl md:text-3xl font-extrabold text-black dark:text-white uppercase tracking-wider">Now Playing</h2>
<div class="text-black dark:text-white text-lg font-bold">🔊</div>
</div>
<div class="flex items-center space-x-4 mb-6">
<div class="w-20 h-20 bg-blue-500 dark:bg-blue-800 flex-shrink-0 border-2 border-black dark:border-white overflow-hidden">
<img src="https://picsum.photos/80/80?random=1" alt="Album Art" class="w-full h-full object-cover grayscale">
</div>
<div class="flex-grow">
<h3 class="text-xl md:text-2xl font-bold text-black dark:text-white uppercase leading-tight">Track Title Goes Here</h3>
<p class="text-md md:text-lg text-black dark:text-white font-medium">Artist Name</p>
</div>
</div>
<div class="mb-6">
<div class="w-full bg-black dark:bg-white h-4 mb-2 relative border-2 border-black dark:border-white">
<div class="bg-yellow-500 dark:bg-yellow-400 h-full" style="width: 60%;"></div>
<div class="absolute -right-1 top-1/2 -translate-y-1/2 w-6 h-6 bg-black dark:bg-white border-2 border-black dark:border-white"></div>
</div>
<div class="flex justify-between text-black dark:text-white text-sm font-semibold">
<span>2:30</span>
<span>-1:45</span>
</div>
</div>
<div class="grid grid-cols-3 gap-4 border-t-4 border-black dark:border-white pt-4">
<button class="bg-black dark:bg-white text-yellow-500 dark:text-yellow-400 p-3 text-lg md:text-xl font-bold border-2 border-black dark:border-white flex items-center justify-center transform active:scale-95 transition-transform duration-100">
⏪
</button>
<button class="bg-yellow-500 dark:bg-yellow-400 text-black dark:text-white p-3 text-lg md:text-xl font-bold border-2 border-black dark:border-white flex items-center justify-center transform active:scale-95 transition-transform duration-100">
▶
</button>
<button class="bg-black dark:bg-white text-yellow-500 dark:text-yellow-400 p-3 text-lg md:text-xl font-bold border-2 border-black dark:border-white flex items-center justify-center transform active:scale-95 transition-transform duration-100">
⏩
</button>
</div>
<div class="mt-6 pt-4 border-t-4 border-black dark:border-white">
<div class="flex justify-between items-center mb-2">
<span class="text-black dark:text-white font-bold text-sm">Volume</span>
<span class="text-black dark:text-white text-sm">75%</span>
</div>
<div class="w-full bg-black dark:bg-white h-3 relative border-2 border-black dark:border-white">
<div class="bg-blue-500 dark:bg-blue-800 h-full" style="width: 75%;"></div>
<div class="absolute -right-1 top-1/2 -translate-y-1/2 w-5 h-5 bg-black dark:bg-white border-2 border-black dark:border-white"></div>
</div>
</div>
</div>
</div>
Composants associés
Lecteur audio monochromatique 3D
Composant de lecteur audio monochromatique 3D réactif pour portefeuille, avec prise en charge du mode sombre
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.