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’indicateur de progression simple et réactif avec des effets néon/lumineux et des tons de bijoux, adapté aux sites de conseil/de services. Inclut la prise en charge du mode sombre.
Volet Indicateurs de progrès
Un composant d’indicateur de progression de style luxe/premium conçu pour les applications de sport/fitness, avec des tons de bijoux, une typographie sophistiquée et une réactivité totale avec prise en charge du mode sombre.
Volet Indicateurs de progrès
Un composant d’indicateurs de progression de style rétro/vintage utilisant Tailwind CSS avec des effets réactifs et la prise en charge du thème sombre.