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 complexe d’indicateur de progression avec des dégradés de couleurs neutres et froides, des transitions fluides et une progression en plusieurs étapes, adapté aux sites Web gouvernementaux/de services publics. Inclut la prise en charge du mode sombre et est entièrement réactif.
Volet Indicateurs de progrès
Indicateurs de progression inspirés du papier/de l’impression pour une place de marché, avec des couleurs bonbons/sucrées. Conception complexe avec plusieurs étapes, mise en page réactive et prise en charge du mode sombre.
Volet Indicateurs de progrès
Un composant d’indicateurs de progression de style de conception 3D avec une palette de couleurs en niveaux de gris pour la consommation de contenu de blog, avec une conception réactive et une prise en charge du mode sombre.