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.
HTML Code
<div class="p-4 bg-stone-100 dark:bg-stone-900 rounded-lg shadow-xl max-w-md mx-auto my-10 transform transition duration-500 hover:scale-105">
<div class="flex items-center space-x-4">
<div class="flex-shrink-0">
<img class="h-16 w-16 rounded-lg object-cover shadow-lg" src="https://picsum.photos/seed/audio-art/100/100" alt="Album Art">
</div>
<div class="flex-grow">
<h3 class="text-lg font-semibold text-stone-800 dark:text-stone-200">Whispering Pines</h3>
<p class="text-sm text-stone-600 dark:text-stone-400">Nature Sounds Co.</p>
</div>
<button class="p-3 rounded-full bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 transform transition duration-300 hover:scale-110 hover:bg-stone-400 dark:hover:bg-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-50">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
</svg>
</button>
</div>
<div class="mt-5">
<div class="flex items-center space-x-3">
<span class="text-xs text-stone-600 dark:text-stone-400">0:45</span>
<div class="flex-grow bg-stone-300 dark:bg-stone-700 rounded-full h-2">
<div class="bg-amber-700 dark:bg-amber-500 h-2 rounded-full" style="width: 45%;"></div>
</div>
<span class="text-xs text-stone-600 dark:text-stone-400">3:20</span>
</div>
<div class="flex justify-between items-center mt-4">
<button class="p-2 rounded-full text-stone-600 dark:text-stone-400 transform transition duration-300 hover:scale-110 hover:text-stone-800 dark:hover:text-stone-200 focus:outline-none">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/></svg>
</button>
<button class="p-2 rounded-full text-stone-600 dark:text-stone-400 transform transition duration-300 hover:scale-110 hover:text-stone-800 dark:hover:text-stone-200 focus:outline-none">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M18 18l-8.5-6L18 6v12zM6 6v12h2V6H6z"/></svg>
</button>
<button class="p-2 rounded-full text-stone-600 dark:text-stone-400 transform transition duration-300 hover:scale-110 hover:text-stone-800 dark:hover:text-stone-200 focus:outline-none">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 4.5V19.5M19.5 12H4.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
<div class="relative group">
<button class="p-2 rounded-full text-stone-600 dark:text-stone-400 transform transition duration-300 hover:scale-110 hover:text-stone-800 dark:hover:text-stone-200 focus:outline-none">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15v-7h2v7h-2zm0-9V7h2v1h-2z"/></svg>
</button>
<span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1 bg-stone-700 text-white text-xs rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap">Volume Control</span>
</div>
</div>
</div>
</div>Composants associés
Glassmorphism, composant du lecteur audio
Un composant de lecteur audio complexe, conçu pour les interfaces industrielles/industrielles, avec des couleurs à contraste élevé, une réactivité totale et une prise en charge du mode sombre.
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
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.