Lecteur audio brutaliste
Un composant de lecteur audio brutaliste avec un design réactif, une prise en charge du mode sombre et sans JavaScript.
HTML Code
<div class="min-h-screen bg-stone-100 dark:bg-black p-8 flex items-center justify-center">
<div class="w-full max-w-md bg-white dark:bg-stone-900 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] border-[4px] border-black dark:border-white overflow-hidden">
<div class="p-6">
<h3 class="text-2xl font-bold text-black dark:text-white mb-4 border-b-4 border-black dark:border-white pb-2">Now Playing</h3>
<div class="flex items-center mb-6">
<img class="w-16 h-16 object-cover border-4 border-black dark:border-white mr-4" src="https://picsum.photos/100/100" alt="Album Art">
<div>
<p class="text-xl font-semibold text-black dark:text-white">Track Title</p>
<p class="text-black dark:text-white">Artist Name</p>
</div>
</div>
<div class="mb-6">
<div class="h-4 bg-gray-300 dark:bg-stone-700 border-2 border-black dark:border-white"></div>
</div>
<div class="flex justify-between text-black dark:text-white mb-6">
<span>0:00</span>
<span>3:45</span>
</div>
<div class="flex justify-center space-x-6">
<button class="p-3 border-4 border-black dark:border-white text-black dark:text-white shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] font-bold">Prev</button>
<button class="p-3 border-4 border-black dark:border-white text-black dark:text-white shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] font-bold">Play</button>
<button class="p-3 border-4 border-black dark:border-white text-black dark:text-white shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] font-bold">Next</button>
</div>
</div>
</div>
</div>Composants associés
Composant du lecteur audio Cyberpunk
Un composant de lecteur audio simple et réactif avec une esthétique cyberpunk futuriste utilisant une palette de couleurs violet/violet, adapté aux vitrines de portfolio. Inclut la prise en charge du mode sombre.
Lecteur audio de luxe/premium
Un composant de lecteur audio simple et élégant conçu pour les forums ou les plates-formes communautaires, doté d’un style luxueux/premium avec une palette de couleurs automnale et une réactivité totale avec la prise en charge du mode sombre.
Composant de lecteur audio ludique
Un composant de lecteur audio simple et ludique avec des tons sépia/brun chauds, des éléments arrondis et une esthétique joyeuse. Inclut la prise en charge du mode sombre et est entièrement réactif pour les plates-formes de divertissement et de médias.