Composant de la barre de progression du mode sombre
Un composant de barre de progression réactif en mode sombre pour les sites Web d’entreprise, utilisant des couleurs vives et des éléments interactifs.
HTML Code
<div class="p-6 max-w-md mx-auto bg-gray-800 rounded-xl shadow-md space-y-4">
<h2 class="text-2xl font-bold text-white text-center">Progress Tracker</h2>
<div class="flex justify-between items-center">
<span class="text-sm text-gray-400">Task 1</span>
<span class="text-sm text-gray-400">75%</span>
</div>
<div class="w-full bg-gray-700 rounded-full h-4">
<div class="bg-green-500 h-4 rounded-full" style="width: 75%;"></div>
</div>
<div class="flex justify-between items-center">
<span class="text-sm text-gray-400">Task 2</span>
<span class="text-sm text-gray-400">50%</span>
</div>
<div class="w-full bg-gray-700 rounded-full h-4">
<div class="bg-yellow-500 h-4 rounded-full" style="width: 50%;"></div>
</div>
<div class="flex justify-between items-center">
<span class="text-sm text-gray-400">Task 3</span>
<span class="text-sm text-gray-400">30%</span>
</div>
<div class="w-full bg-gray-700 rounded-full h-4">
<div class="bg-red-500 h-4 rounded-full" style="width: 30%;"></div>
</div>
<div class="flex justify-between items-center">
<span class="text-sm text-gray-400">Task 4</span>
<span class="text-sm text-gray-400">10%</span>
</div>
<div class="w-full bg-gray-700 rounded-full h-4">
<div class="bg-blue-500 h-4 rounded-full" style="width: 10%;"></div>
</div>
</div>
Composants associés
Barre de progression du mode sombre triadique
Un composant de barre de progression simple et triadique pour le mode sombre, adapté aux blogs et à la consommation de contenu. Il dispose d’un design réactif avec Tailwind CSS, utilisant le préfixe dark : pour la prise en charge du thème sombre sans JavaScript.
Composant de la barre de progression
Un composant simple de barre de progression stylisé dans un design brutaliste avec une palette de couleurs en niveaux de gris pour les applications de commerce électronique. Il est réactif et prend en charge le mode sombre.
Composant de la barre de progression
Un composant de barre de progression réactif conçu dans le style Material Design, incorporant des schémas de couleurs pastel pour les vitrines de portfolio. Il prend en charge le mode sombre.