Barre de progression du neumorphisme
Composant de barre de progression avec conception Neumorphism, effets réactifs et prise en charge du thème sombre à l’aide de Tailwind CSS
HTML Code
<!-- Light Mode -->
<div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800">
<div class="w-64 h-4 bg-gray-300 rounded-full shadow-inner dark:bg-gray-700 dark:shadow-inner-dark">
<div class="w-3/4 h-full text-center text-xs text-white bg-blue-500 rounded-full dark:bg-blue-600" style="width: 75%;">
</div>
</div>
</div>
<!-- Dark Mode (example - activate dark mode in your Tailwind config) -->
<div class="flex items-center justifies-center min-h-screen bg-gray-800">
<div class="w-64 h-4 bg-gray-700 rounded-full shadow-inner-dark">
<div class="w-3/4 h-full text-center text-xs text-white bg-blue-600 rounded-full" style="width: 75%;">
</div>
</div>
</div>Composants associés
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
Un composant de barre de progression réactif conçu pour le mode sombre avec une palette de couleurs pastel, adapté aux sites Web d’entreprise.
Barre de progression neumorphe
Un composant de barre de progression réactif conçu avec le style Neumorphism, prenant en charge les thèmes clairs et sombres à l’aide de Tailwind CSS.