Composant de la barre de progression Bauhaus
Un composant de barre de progression de complexité modérée, réactif, inspiré du Bauhaus, adapté aux plates-formes de divertissement/médias, avec des neutres froids et la prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans tracking-wide">
<div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden border border-gray-200 dark:border-gray-700">
<div class="p-6 sm:p-8 space-y-6">
<div class="flex items-center justify-between">
<h2 class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-white">Now Playing</h2>
<svg class="h-8 w-8 text-gray-500 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h4l1-1 1-4m-7-10l7-10m7 10l-7 10m7-10l-4-4m-3 0L3 17l1-1h4l1-1 1-4m-7-10l7-10m7 10l-7 10m7-10l-4-4m-3 0L3 17l1-1h4l1-1 1-4m-7-10l7-10m7 10l-7 10m7-10l-4-4m-3 0L3 17l1-1h4l1-1 1-4"></path>
</svg>
</div>
<div class="relative w-full rounded-full h-3 bg-gray-200 dark:bg-gray-700 overflow-hidden group">
<div class="absolute top-0 left-0 h-full bg-blue-500 dark:bg-blue-600 rounded-full transition-all duration-500 ease-out" style="width: 65%;"></div>
<div class="absolute top-1/2 -translate-y-1/2 left-[65%] w-4 h-4 bg-gray-900 dark:bg-gray-200 rounded-full border-2 border-gray-900 dark:border-gray-200 group-hover:scale-125 transition-transform duration-200 ease-out"></div>
</div>
<div class="flex items-center justify-between text-sm text-gray-600 dark:text-gray-400 font-medium">
<span class="text-gray-900 dark:text-white">03:45</span>
<span>05:30</span>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6 items-center pt-4">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/id/1047/100/100" alt="Album Art" class="w-20 h-20 sm:w-24 sm:h-24 rounded-lg object-cover border-2 border-gray-300 dark:border-gray-600">
<div>
<p class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white leading-tight">Geometric Dreams</p>
<p class="text-md sm:text-lg text-gray-600 dark:text-gray-400 mt-1">The Bauhaus Ensemble</p>
</div>
</div>
<div class="flex justify-around sm:justify-end space-x-6">
<button class="p-3 sm:p-4 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.75 19l-7.5-7.5 7.5-7.5" />
</svg>
</button>
<button class="p-4 sm:p-5 rounded-full bg-blue-500 text-white shadow-lg hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800">
<svg class="h-7 w-7" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M6 5v14a1 1 0 001.5 1.32l11-7a1 1 0 000-1.64l-11-7A1 1 0 006 5z" clip-rule="evenodd" />
</svg>
</button>
<button class="p-3 sm:p-4 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</button>
</div>
</div>
</div>
</div>
</div>Composants associés
Barre de progression de fitness sportif en niveaux de gris 3D
Un composant complexe de barre de progression en 3D en niveaux de gris conçu pour les applications de sport et de fitness, montrant la progression de l’entraînement avec profondeur et engagement visuel. Il inclut la prise en charge du mode sombre et est entièrement réactif.
Barre de progression néo-rétro cyberpunk
Un composant de barre de progression de complexité modérée avec une esthétique cyberpunk et néo-rétro, des arrière-plans sombres et des couleurs d’accent vintage discrètes, conçu pour les plateformes de divertissement/médias. Il dispose d’un affichage de progression segmenté et est entièrement réactif avec la prise en charge du mode sombre.
Barre de progression
Un composant de barre de progression réactif avec prise en charge du mode sombre pour le commerce électronique, avec une palette de couleurs vives et une mise en page simple.