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.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-900 dark:bg-black p-4">
<div class="w-full max-w-sm rounded-lg overflow-hidden shadow-2xl transform hover:scale-105 transition duration-300 ease-in-out bg-gradient-to-br from-purple-900 to-indigo-900 dark:from-purple-950 dark:to-indigo-950 border border-purple-700 dark:border-indigo-800">
<div class="relative">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=1" alt="Album Artwork">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
<button class="p-4 rounded-full bg-purple-500 text-white shadow-lg transform hover:scale-110 active:scale-95 transition duration-200 ease-in-out focus:outline-none focus:ring-4 focus:ring-purple-400 focus:ring-opacity-75">
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M8 5v14l11-7z"></path>
</svg>
</button>
</div>
</div>
<div class="p-4 text-white">
<h3 class="text-xl font-bold text-purple-200 dark:text-purple-300 mb-1">Neon Dreams</h3>
<p class="text-sm text-purple-300 dark:text-purple-400">Synthwave Artist</p>
<div class="mt-4">
<div class="w-full bg-purple-800 rounded-full h-2.5 dark:bg-purple-900">
<div class="bg-purple-400 h-2.5 rounded-full" style="width: 65%;"></div>
</div>
<div class="flex justify-between text-xs mt-2 text-purple-300 dark:text-purple-400">
<span>0:45</span>
<span>3:20</span>
</div>
</div>
<div class="flex justify-around items-center mt-6 text-purple-300 dark:text-purple-400">
<button class="p-2 focus:outline-none hover:text-purple-100 transition-colors duration-200">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"></path>
</svg>
</button>
<button class="p-2 focus:outline-none hover:text-purple-100 transition-colors duration-200">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M6 18V6h3v12H6zm5 0V6h3v12h-3zm5 0V6h3v12h-3z"></path>
</svg>
</button>
<button class="p-2 focus:outline-none hover:text-purple-100 transition-colors duration-200">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm2 14.5V9.5l-6 4.5 6 4.5z"></path>
</svg>
</button>
</div>
</div>
</div>
</div>Composants associés
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.
Composant de lecteur audio
Un composant de lecteur audio complexe et minimaliste avec une palette de couleurs rétro/vintage, conçu pour les plateformes de rencontres/sociales. Les fonctionnalités incluent les commandes de lecture, la barre de progression, le contrôle du volume, les informations sur les pistes et la prise en charge du mode sombre.
Composant de lecteur audio
Un composant de lecteur audio réactif avec des micro-interactions, une palette de couleurs de terre, une complexité modérée et une prise en charge du thème sombre, adapté aux sites Web d’entreprise.