Glassmorphism_EarthTones_ProgressBar_ForumComponent
Un composant de barre de progression réactif avec des tons de terre, adapté aux forums ou aux plateformes communautaires. Comprend des éléments translucides givrés ressemblant à du verre dépoli avec des effets de flou et la prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-start justify-center font-sans">
<div class="w-full max-w-2xl bg-white/30 dark:bg-gray-800/60 backdrop-blur-lg rounded-xl shadow-lg ring-1 ring-black/5 dark:ring-white/10 overflow-hidden">
<!-- Component Header -->
<div class="px-6 py-4 border-b border-gray-200/50 dark:border-gray-700/50 flex items-center justify-between">
<h2 class="text-lg sm:text-xl font-semibold text-gray-800 dark:text-gray-100">Community Engagement Progress</h2>
<span class="text-sm text-gray-600 dark:text-gray-400">Level 3 Enthusiast</span>
</div>
<!-- Progress Bar Section -->
<div class="p-6 space-y-4">
<!-- Individual Progress Item: Discussions -->
<div class="space-y-2">
<div class="flex justify-between items-center">
<span class="text-sm font-medium text-gray-700 dark:text-gray-200">Discussions Created</span>
<span class="text-sm text-gray-600 dark:text-gray-400">15 / 20</span>
</div>
<div class="relative h-2 bg-gray-200/70 dark:bg-gray-700/70 rounded-full overflow-hidden shadow-inner-sm">
<div class="absolute top-0 left-0 h-full w-[75%] rounded-full bg-emerald-600/70 dark:bg-emerald-500/70 shadow-md" style="width: 75%;"></div>
</div>
</div>
<!-- Individual Progress Item: Replies -->
<div class="space-y-2">
<div class="flex justify-between items-center">
<span class="text-sm font-medium text-gray-700 dark:text-gray-200">Replies Posted</span>
<span class="text-sm text-gray-600 dark:text-gray-400">45 / 50</span>
</div>
<div class="relative h-2 bg-gray-200/70 dark:bg-gray-700/70 rounded-full overflow-hidden shadow-inner-sm">
<div class="absolute top-0 left-0 h-full w-[90%] rounded-full bg-orange-600/70 dark:bg-orange-500/70 shadow-md" style="width: 90%;"></div>
</div>
</div>
<!-- Individual Progress Item: Upvotes Received -->
<div class="space-y-2">
<div class="flex justify-between items-center">
<span class="text-sm font-medium text-gray-700 dark:text-gray-200">Upvotes Received</span>
<span class="text-sm text-gray-600 dark:text-gray-400">80 / 100</span>
</div>
<div class="relative h-2 bg-gray-200/70 dark:bg-gray-700/70 rounded-full overflow-hidden shadow-inner-sm">
<div class="absolute top-0 left-0 h-full w-[80%] rounded-full bg-amber-600/70 dark:bg-amber-500/70 shadow-md" style="width: 80%;"></div>
</div>
</div>
<!-- Individual Progress Item: Badges Earned -->
<div class="space-y-2">
<div class="flex justify-between items-center">
<span class="text-sm font-medium text-gray-700 dark:text-sky-200">Badges Earned</span>
<span class="text-sm text-gray-600 dark:text-gray-400">8 / 10</span>
</div>
<div class="relative h-2 bg-gray-200/70 dark:bg-gray-700/70 rounded-full overflow-hidden shadow-inner-sm">
<div class="absolute top-0 left-0 h-full w-[80%] rounded-full bg-sky-600/70 dark:bg-sky-500/70 shadow-md" style="width: 80%;"></div>
</div>
</div>
</div>
<!-- Footer / Call to action -->
<div class="px-6 py-4 bg-white/20 dark:bg-gray-800/50 border-t border-gray-200/50 dark:border-gray-700/50 flex flex-col sm:flex-row items-center justify-between gap-y-2">
<p class="text-sm text-gray-700 dark:text-gray-300 text-center sm:text-left">Keep contributing to reach the next milestone!</p>
<button type="button" class="px-4 py-2 bg-brown-700/70 dark:bg-brown-600/70 text-white text-sm font-medium rounded-lg hover:bg-brown-800/70 dark:hover:bg-brown-700/70 focus:outline-none focus:ring-2 focus:ring-brown-500/70 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition-colors duration-200 ease-in-out shadow">
View All Achievements
</button>
</div>
</div>
</div>Composants associés
Barre de progression
Un composant de barre de progression réactif avec prise en charge du mode sombre pour le commerce électronique, avec une palette de couleurs vives et une mise en page simple.
Brutalist_ProgressBar
Un composant de barre de progression à contraste élevé, de style brutaliste, adapté aux plateformes de marché, avec des couleurs vives et une mise en page simple, avec une réactivité totale et une prise en charge du mode sombre.
Composant de la barre de progression Bauhaus
Un composant de barre de progression de complexité modérée, réactif, inspiré du Bauhaus, adapté aux plates-formes de divertissement/médias, avec des neutres froids et la prise en charge du mode sombre.