Composants Indicateurs de progrès Volet Indicateurs de progrè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.

Aperçu

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

Indicateurs de progrès agricole Cyberpunk

Un ensemble d’indicateurs de progression futuristes, sur le thème du cyberpunk, pour un site Web agricole ou agricole, avec des tons chauds de coucher de soleil. Réactif avec prise en charge du mode sombre.

Ouvrir