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 de style rétro/vintage utilisant Tailwind CSS avec des effets réactifs et la prise en charge du thème sombre.
Volet Indicateurs de progrès
Un composant simple d’indicateurs de progression inspiré de l’esthétique rétro/vintage des années 80 et 90, utilisant une palette de couleurs complémentaires. Conçu pour les interfaces de médias sociaux et réactif avec prise en charge du thème sombre.
Volet Indicateurs de progrès
Un indicateur de progression de style neumorphique adapté aux interfaces de médias sociaux, doté d’une mise en page simple et d’un design réactif avec prise en charge du mode sombre.