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
Indicateur de progression du sépia biologique
Un indicateur de progression simple, inspiré de la nature, pour les applications de rencontres/sociales, avec des tons sépia et bruns chauds avec des lignes fluides, réactif et compatible avec le mode sombre.
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.
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é.