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.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
<h1 class="text-4xl font-bold text-center text-gray-800 dark:text-gray-200 mb-6">
Retro Progress Indicators
</h1>
<div class="w-full max-w-lg">
<!-- Progress Bar -->
<div class="mb-6">
<div class="relative pt-1">
<div class="flex mb-2 items-center justify-between">
<div class="text-sm font-medium text-gray-600 dark:text-gray-300">Loading...</div>
<div class="text-sm font-medium text-gray-600 dark:text-gray-300">80%</div>
</div>
<div class="flex h-2 mb-4 bg-gray-200 rounded dark:bg-gray-700">
<div class="bg-yellow-500 h-full rounded" style="width: 80%"></div>
</div>
</div>
</div>
<!-- Circular Progress Indicator -->
<div class="flex items-center justify-center mb-6">
<div class="relative w-24 h-24">
<img src="https://picsum.photos/seed/circularprogress/300/300" class="rounded-full shadow-lg" alt="Circular Progress" />
<div class="absolute inset-0 flex items-center justify-center text-xl font-bold text-yellow-500">
80%
</div>
</div>
</div>
<!-- Step Indicators -->
<div class="flex justify-between w-full text-center">
<div>
<div class="w-4 h-4 bg-yellow-500 rounded-full mx-auto mb-2"></div>
<div class="text-sm font-medium text-gray-600 dark:text-gray-300">Step 1</div>
</div>
<div>
<div class="w-4 h-4 bg-gray-300 rounded-full mx-auto mb-2 dark:bg-gray-600"></div>
<div class="text-sm font-medium text-gray-600 dark:text-gray-300">Step 2</div>
</div>
<div>
<div class="w-4 h-4 bg-gray-300 rounded-full mx-auto mb-2 dark:bg-gray-600"></div>
<div class="text-sm font-medium text-gray-600 dark:text-gray-300">Step 3</div>
</div>
</div>
</div>
<div class="mt-6">
<img src="https://randomuser.me/api/portraits/men/32.jpg" class="rounded-full w-16 h-16" alt="User Avatar" />
<div class="text-center mt-2 text-sm text-gray-600 dark:text-gray-300">John Doe</div>
</div>
</div>Composants associés
Volet Indicateurs de progrès
Un composant d’indicateurs de progression réactif avec un style glassmorphism, avec des éléments translucides givrés ressemblant à du verre et des effets de flou, prenant en charge le thème sombre à l’aide de Tailwind CSS.
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.
BrutalisteNiveaux de grisProgressBar
Une barre de progression en niveaux de gris de style brutaliste pour le contenu du blog, avec un design simple, une prise en charge du mode sombre et une réactivité.