Composante des composantes interactives
Un composant interactif minimaliste, dynamique et simple conçu pour les plateformes de divertissement et de médias, avec des commandes de lecture/pause, une barre de progression et un contrôle du volume des haut-parleurs. Comprend une réactivité complète et la prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-6 md:p-8 lg:p-10 bg-gradient-to-br from-emerald-50 to-cyan-50 dark:from-slate-800 dark:to-gray-900 min-h-screen flex items-center justify-center font-sans">
<div class="w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl p-6 sm:p-8 bg-white dark:bg-gray-800 rounded-2xl shadow-xl border border-gray-100 dark:border-gray-700 transition-all duration-300 ease-in-out">
<div class="flex items-center space-x-4 mb-6 sm:mb-8">
<div class="aspect-video w-20 sm:w-24 md:w-28 flex-shrink-0 bg-gray-200 dark:bg-gray-700 rounded-lg overflow-hidden shadow-md">
<img src="https://picsum.photos/300/200?random=1" alt="Album Art" class="w-full h-full object-cover">
</div>
<div class="flex-grow min-w-0">
<h3 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-50 truncate mb-1">
Epic Soundtrack Loop
</h3>
<p class="text-sm sm:text-base text-cyan-600 dark:text-teal-400 truncate">
Unknown Artist
</p>
</div>
</div>
<!-- Playback Controls -->
<div class="flex justify-around items-center mb-6 sm:mb-8">
<button class="p-2 sm:p-3 rounded-full bg-emerald-100 dark:bg-emerald-700 text-emerald-600 dark:text-white hover:bg-emerald-200 dark:hover:bg-emerald-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
<svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 10.293a1 1 0 010-1.414L10.586 6V7a1 1 0 011 1v4a1 1 0 01-1 1v1l-2.879-2.879a1 1 0 01-.11-.13V10.293zM10 18a8 8 0 100-16 8 8 0 000 16z" clip-rule="evenodd"></path></svg>
</button>
<button class="p-3 sm:p-4 rounded-full bg-cyan-500 dark:bg-cyan-600 text-white shadow-lg hover:bg-cyan-600 dark:hover:bg-cyan-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-cyan-400 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
<svg class="w-6 h-6 sm:w-7 sm:h-7" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
<!-- Or use pause icon: -->
<!-- <svg class="w-6 h-6 sm:w-7 sm:h-7" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg> -->
</button>
<button class="p-2 sm:p-3 rounded-full bg-emerald-100 dark:bg-emerald-700 text-emerald-600 dark:text-white hover:bg-emerald-200 dark:hover:bg-emerald-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
<svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 10.293a1 1 0 011.414 0l2.879 2.879A1 1 0 0116 13V7a1 1 0 01-1-1v-1l-2.879 2.879a1 1 0 01-.13.11V10.293zM10 18a8 8 0 100-16 8 8 0 000 16z" clip-rule="evenodd"></path></svg>
</button>
</div>
<!-- Progress Bar -->
<div class="mb-6 sm:mb-8">
<div class="h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden mb-2 relative">
<div class="h-full bg-cyan-500 dark:bg-cyan-400 w-1/3 rounded-full absolute top-0 left-0 transition-all duration-300 ease-out" style="width: 33.33%;"></div>
<div class="w-3 h-3 bg-cyan-700 dark:bg-cyan-300 rounded-full absolute top-1/2 -mt-1.5 left-1/3 -ml-1.5 shadow-md transform -translate-x-1/2 transition-all duration-300 ease-out"></div>
</div>
<div class="flex justify-between text-xs sm:text-sm text-gray-500 dark:text-gray-400">
<span>2:15</span>
<span>6:40</span>
</div>
</div>
<!-- Volume Control -->
<div class="flex items-center space-x-3 text-gray-600 dark:text-gray-300">
<svg class="w-5 h-5 sm:w-6 sm:h-6 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM14.293 7.293a1 1 0 011.414 0L17 8.586l1.293-1.293a1 1 0 111.414 1.414L18.414 10l1.293 1.293a1 1 0 01-1.414 1.414L17 11.414l-1.293 1.293a1 1 0 01-1.414-1.414L15.586 10l-1.293-1.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
<div class="flex-grow h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full relative">
<div class="h-full bg-emerald-500 dark:bg-emerald-400 w-3/4 rounded-full absolute top-0 left-0 transition-all duration-300 ease-out" style="width: 75%;"></div>
<div class="w-3 h-3 bg-emerald-700 dark:bg-emerald-300 rounded-full absolute top-1/2 -mt-1.5 left-3/4 -ml-1.5 shadow-md transform -translate-x-1/2 transition-all duration-300 ease-out"></div>
</div>
</div>
</div>
</div>Composants associés
Composante des composantes interactives
Un composant interactif de style Neumorphism avec des effets réactifs et une prise en charge du thème sombre.
Composante des composantes interactives
Composant interactif de conception matérielle avec effets réactifs et prise en charge du thème sombre.
Composante des composantes interactives
Un composant interactif conçu pour les plateformes d’emploi et de carrière, avec des lignes fluides organiques inspirées de la nature et une palette de couleurs vives de bonbons et de sucreries. Il comprend des cartes de travail avec des boutons d’application et des étiquettes de compétence, prenant en charge la réactivité et le mode sombre.