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.
HTML Code
<div class="flex flex-col items-center justify-center p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Progress Indicators</h2>
<div class="relative w-full max-w-md">
<div class="flex items-center justify-between mb-2">
<span class="text-gray-600 dark:text-gray-400">Step 1</span>
<span class="text-gray-600 dark:text-gray-400">20%</span>
</div>
<div class="bg-gray-200 dark:bg-gray-700 rounded-full h-4">
<div class="bg-gray-800 dark:bg-gray-300 h-4 rounded-full" style="width: 20%;"></div>
</div>
</div>
<div class="relative w-full max-w-md mt-4">
<div class="flex items-center justify-between mb-2">
<span class="text-gray-600 dark:text-gray-400">Step 2</span>
<span class="text-gray-600 dark:text-gray-400">50%</span>
</div>
<div class="bg-gray-200 dark:bg-gray-700 rounded-full h-4">
<div class="bg-gray-800 dark:bg-gray-300 h-4 rounded-full" style="width: 50%;"></div>
</div>
</div>
<div class="relative w-full max-w-md mt-4">
<div class="flex items-center justify-between mb-2">
<span class="text-gray-600 dark:text-gray-400">Step 3</span>
<span class="text-gray-600 dark:text-gray-400">80%</span>
</div>
<div class="bg-gray-200 dark:bg-gray-700 rounded-full h-4">
<div class="bg-gray-800 dark:bg-gray-300 h-4 rounded-full" style="width: 80%;"></div>
</div>
</div>
<div class="relative w-full max-w-md mt-4">
<div class="flex items-center justify-between mb-2">
<span class="text-gray-600 dark:text-gray-400">Step 4</span>
<span class="text-gray-600 dark:text-gray-400">100%</span>
</div>
<div class="bg-gray-200 dark:bg-gray-700 rounded-full h-4">
<div class="bg-gray-800 dark:bg-gray-300 h-4 rounded-full" style="width: 100%;"></div>
</div>
</div>
<div class="mt-6">
<img src="https://picsum.photos/200/100?random=1" alt="Content Image" class="rounded-md shadow-md">
</div>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-500 dark:border-gray-300">
<span class="ml-2 text-gray-800 dark:text-white">Author Name</span>
</div>
</div>Composants associés
Volet Indicateurs de progrès
Un composant d’indicateurs de progression inspiré de Material Design avec des effets réactifs et la prise en charge du thème sombre, construit à l’aide de Tailwind CSS.
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.
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.