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
Composant de la barre de progression
Un composant de barre de progression réactif conçu avec des éléments 3D, utilisant une palette de couleurs analogue adaptée au commerce électronique, avec prise en charge du mode sombre
Barre de progression Glassmorphism
Barre de progression de style Glassmorphism conçue pour les interfaces de médias sociaux, avec des couleurs vives et la prise en charge du mode sombre. Mise en page simple sans JavaScript.
Barre de progression de fitness sportif en niveaux de gris 3D
Un composant complexe de barre de progression en 3D en niveaux de gris conçu pour les applications de sport et de fitness, montrant la progression de l’entraînement avec profondeur et engagement visuel. Il inclut la prise en charge du mode sombre et est entièrement réactif.