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.
HTML Code
<div class="min-h-screen bg-gray-900 text-white flex flex-col items-center justify-center p-8 space-y-8">
<h1 class="text-4xl font-bold mb-4 text-gray-100">Portfolio Progress Indicators</h1>
<div class="bg-gray-800 rounded-lg w-full max-w-xl p-6 shadow-lg space-y-6">
<h2 class="text-2xl font-bold text-gray-200">Current Projects</h2>
<div class="space-y-4">
<div class="flex justify-between items-center bg-gray-700 p-4 rounded-lg">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/50/50" alt="Project 1" class="rounded-full">
<span class="text-lg font-semibold">Project Alpha</span>
</div>
<div class="relative w-full h-4 bg-gray-600 rounded-full overflow-hidden">
<div class="absolute top-0 left-0 h-4 bg-green-500" style="width: 60%;"></div>
</div>
</div>
<div class="flex justify-between items-center bg-gray-700 p-4 rounded-lg">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/50/50" alt="Project 2" class="rounded-full">
<span class="text-lg font-semibold">Project Beta</span>
</div>
<div class="relative w-full h-4 bg-gray-600 rounded-full overflow-hidden">
<div class="absolute top-0 left-0 h-4 bg-yellow-500" style="width: 40%;"></div>
</div>
</div>
<div class="flex justify-between items-center bg-gray-700 p-4 rounded-lg">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/50/50" alt="Project 3" class="rounded-full">
<span class="text-lg font-semibold">Project Gamma</span>
</div>
<div class="relative w-full h-4 bg-gray-600 rounded-full overflow-hidden">
<div class="absolute top-0 left-0 h-4 bg-red-500" style="width: 80%;"></div>
</div>
</div>
</div>
</div>
<div class="bg-gray-800 rounded-lg w-full max-w-xl p-6 shadow-lg">
<h2 class="text-2xl font-bold text-gray-200">Completed Projects</h2>
<div class="space-y-4">
<div class="flex justify-between items-center bg-gray-700 p-4 rounded-lg">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/50/50" alt="Project 4" class="rounded-full">
<span class="text-lg font-semibold">Project Delta</span>
</div>
<div class="relative w-full h-4 bg-gray-600 rounded-full overflow-hidden">
<div class="absolute top-0 left-0 h-4 bg-blue-500" style="width: 100%;"></div>
</div>
</div>
<div class="flex justify-between items-center bg-gray-700 p-4 rounded-lg">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/50/50" alt="Project 5" class="rounded-full">
<span class="text-lg font-semibold">Project Epsilon</span>
</div>
<div class="relative w-full h-4 bg-gray-600 rounded-full overflow-hidden">
<div class="absolute top-0 left-0 h-4 bg-purple-500" style="width: 90%;"></div>
</div>
</div>
</div>
</div>
</div>Composants associés
Volet Indicateurs de progrès
Un composant d’indicateur de progression avec un style glassmorphism, un design réactif et une prise en charge du thème sombre. Utilise Tailwind CSS pour le coiffage.
Volet Indicateurs de progrès
Composant d’indicateurs de progression réactif conçu pour un tableau de bord d’interface utilisateur en mode sombre avec un schéma de couleurs analogue. Il comprend divers indicateurs de progression tels que des barres, des cercles et un flux d’activité, le tout stylisé avec Tailwind CSS pour la prise en charge du mode sombre. Aucun JavaScript n’est utilisé.
Volet Indicateurs de progrès
Un composant d’indicateurs de progression de style rétro/vintage avec un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.