Barre de progression du neumorphisme
Un composant réactif de barre de progression de style neumorphisme conçu pour les tableaux de bord, intégrant une fonction interactive et prenant en charge le mode sombre.
HTML Code
<div class="max-w-md mx-auto mt-10 p-5 bg-gray-100 dark:bg-gray-800 rounded-xl shadow-md">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-3">Progress Bar</h2>
<div class="relative pt-1">
<div class="flex justify-between mb-1">
<span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-teal-600 bg-teal-200 dark:bg-teal-600 dark:text-teal-200">Task 1</span>
<span class="text-xs font-semibold text-gray-600 dark:text-gray-400">70%</span>
</div>
<div class="flex items-center h-2 bg-gray-300 dark:bg-gray-600 rounded-full">
<div class="h-full bg-teal-400 rounded-full transition-all duration-300 w-7/12"></div>
</div>
</div>
<div class="relative pt-1">
<div class="flex justify-between mb-1">
<span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-purple-600 bg-purple-200 dark:bg-purple-600 dark:text-purple-200">Task 2</span>
<span class="text-xs font-semibold text-gray-600 dark:text-gray-400">40%</span>
</div>
<div class="flex items-center h-2 bg-gray-300 dark:bg-gray-600 rounded-full">
<div class="h-full bg-purple-400 rounded-full transition-all duration-300 w-5/12"></div>
</div>
</div>
<div class="relative pt-1">
<div class="flex justify-between mb-1">
<span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blue-600 bg-blue-200 dark:bg-blue-600 dark:text-blue-200">Task 3</span>
<span class="text-xs font-semibold text-gray-600 dark:text-gray-400">90%</span>
</div>
<div class="flex items-center h-2 bg-gray-300 dark:bg-gray-600 rounded-full">
<div class="h-full bg-blue-400 rounded-full transition-all duration-300 w-11/12"></div>
</div>
</div>
</div>Composants associés
Barre de progression des commandes e-commerce
Un composant de barre de progression réactif pour le commerce électronique avec prise en charge du mode sombre, avec un design monochromatique. Pas de JavaScript, seulement du HTML et du CSS Tailwind.
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.
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.