Composant Indicateurs de Progression Glassmorphism
Indicateur de progression Glassmorphism Composant avec palette de couleurs vives et complexité simple.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen dark:bg-gray-900">
<div class="dark:bg-gray-800 bg-white bg-opacity-20 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg dark:backdrop-blur-lg rounded-lg p-6 shadow-xl dark:shadow-xl">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Progress</h2>
<div class="w-64 h-4 bg-gray-300 rounded-full overflow-hidden dark:bg-gray-700">
<div class="h-full bg-gradient-to-r from-cyan-400 to-blue-500 dark:from-cyan-600 dark:to-blue-700 w-3/4 rounded-full"></div>
</div>
<p class="text-sm text-gray-700 dark:text-gray-300 mt-2">75% Complete</p>
</div>
</div>Composants associé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.
Volet Indicateurs de progrès
Un composant d’indicateurs de progression de style rétro/vintage avec un design réactif et une 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é.