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
HTML Code
<div class="bg-gradient-to-br from-purple-200 via-pink-200 to-yellow-100 dark:from-purple-800 dark:via-pink-800 dark:to-yellow-700 p-6 rounded-lg shadow-xl max-w-sm mx-auto font-mono">
<div class="flex justify-between items-center mb-4">
<div class="text-gray-700 dark:text-gray-300 text-sm">NOW PLAYING</div>
<div class="text-gray-700 dark:text-gray-300 text-sm">03:45</div>
</div>
<div class="flex items-center mb-6">
<img class="w-16 h-16 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Album Art">
<div>
<h3 class="text-lg font-bold text-gray-800 dark:text-white">Synthwave Nights</h3>
<p class="text-gray-600 dark:text-gray-400">Neon Rider</p>
</div>
</div>
<div class="relative mb-4">
<div class="h-2 bg-purple-300 dark:bg-purple-600 rounded-full"></div>
<div class="absolute top-0 left-0 h-2 bg-purple-600 dark:bg-purple-300 rounded-full w-3/4"></div>
<div class="absolute -top-1 left-3/4 w-4 h-4 bg-purple-800 dark:bg-purple-100 rounded-full shadow"></div>
</div>
<div class="flex justify-center items-center space-x-6">
<button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white focus:outline-none">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
</button>
<button class="bg-purple-500 dark:bg-purple-400 text-white dark:text-gray-800 rounded-full p-3 shadow-lg hover:bg-purple-600 dark:hover:bg-purple-300 focus:outline-none">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197 2.132A1 1 0 0010 13.803V9.197a1 1 0 001.555-.832l3.197 2.132a1 1 0 010 1.664z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</button>
<button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white focus:outline-none">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</button>
</div>
<div class="flex justify-center items-center mt-4 space-x-4 text-gray-700 dark:text-gray-300 text-sm">
<div><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg></div>
<div><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.295 10C9.501 6.619 13.305 4 18 4s8.499 2.619 9.705 6M16 18V9m-5 5v4m9-4v4"></path></svg></div>
<div><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6a2 2 0 00-2-2H5a2 2 0 00-2 2v13a2 2 0 002 2h2a2 2 0 002-2zm7 0V6a2 2 0 00-2-2h-2a2 2 0 00-2 2v13a2 2 0 002 2h2a2 2 0 002-2z"></path></svg></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.
Lecteur audio brutaliste
Un composant de lecteur audio brutaliste avec un design réactif, une prise en charge du mode sombre et sans JavaScript.