Volet Indicateurs de progrès
Un composant d’indicateur de progression minimaliste conçu pour mettre en valeur la progression du portefeuille à l’aide de couleurs vives et d’un design réactif avec prise en charge du thème sombre.
HTML Code
<div class="max-w-4xl mx-auto p-8">
<h2 class="text-2xl font-bold text-center mb-6">Portfolio Progress Indicators</h2>
<div class="space-y-8">
<div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-5 shadow-lg">
<div class="flex items-center justify-between mb-2">
<span class="text-lg font-semibold text-blue-600 dark:text-blue-400">Project 1</span>
<span class="text-sm font-medium text-gray-600 dark:text-gray-400">70%</span>
</div>
<div class="relative w-full h-4 bg-gray-300 dark:bg-gray-700 rounded-full">
<div class="absolute h-4 bg-blue-600 dark:bg-blue-400 rounded-full" style="width: 70%;"></div>
</div>
</div>
<div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-5 shadow-lg">
<div class="flex items-center justify-between mb-2">
<span class="text-lg font-semibold text-red-600 dark:text-red-400">Project 2</span>
<span class="text-sm font-medium text-gray-600 dark:text-gray-400">45%</span>
</div>
<div class="relative w-full h-4 bg-gray-300 dark:bg-gray-700 rounded-full">
<div class="absolute h-4 bg-red-600 dark:bg-red-400 rounded-full" style="width: 45%;"></div>
</div>
</div>
<div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-5 shadow-lg">
<div class="flex items-center justify-between mb-2">
<span class="text-lg font-semibold text-green-600 dark:text-green-400">Project 3</span>
<span class="text-sm font-medium text-gray-600 dark:text-gray-400">90%</span>
</div>
<div class="relative w-full h-4 bg-gray-300 dark:bg-gray-700 rounded-full">
<div class="absolute h-4 bg-green-600 dark:bg-green-400 rounded-full" style="width: 90%;"></div>
</div>
</div>
<div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-5 shadow-lg">
<div class="flex items-center justify-between mb-2">
<span class="text-lg font-semibold text-yellow-600 dark:text-yellow-400">Project 4</span>
<span class="text-sm font-medium text-gray-600 dark:text-gray-400">60%</span>
</div>
<div class="relative w-full h-4 bg-gray-300 dark:bg-gray-700 rounded-full">
<div class="absolute h-4 bg-yellow-600 dark:bg-yellow-400 rounded-full" style="width: 60%;"></div>
</div>
</div>
</div>
</div>Composants associés
Volet Indicateurs de progrès
Un composant d’indicateurs de progression de style brutaliste à fort contraste, mettant en valeur le travail ou les produits d’un portefeuille. Il dispose d’une interface riche avec plusieurs éléments interactifs, conçue pour être réactive avec la prise en charge du thème sombre à l’aide de Tailwind CSS.
Volet Indicateurs de progrès
Un indicateur de progression simple conçu avec un effet de glassmorphism, adapté aux sites Web de commerce électronique avec prise en charge du mode sombre et une palette de couleurs monochromatiques.
Indicateurs de progrès Composante 33
Un indicateur de progression réactif avec des micro-interactions dans Tailwind CSS, avec prise en charge du thème sombre.