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
HTML Code
<div class="max-w-md mx-auto p-4">
<div class="relative h-8 bg-gray-300 rounded-md overflow-hidden dark:bg-gray-700">
<div class="absolute inset-0 transition-all duration-300 ease-out bg-gradient-to-r from-green-400 to-blue-400 dark:from-green-600 dark:to-blue-600" style="width: 70%;"></div>
<div class="absolute inset-0 flex items-center justify-center text-white font-semibold">
70%
</div>
</div>
<div class="mt-4 text-gray-700 dark:text-gray-300">
<p class="text-sm">Progress towards your shopping goals.</p>
</div>
</div>Composants associés
Composant de la barre de progression
Un composant de barre de progression réactif conçu pour le mode sombre à l’aide de Tailwind CSS, adapté aux applications Web modernes.
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
Barre de progression du mode sombre triadique
Un composant de barre de progression simple et triadique pour le mode sombre, adapté aux blogs et à la consommation de contenu. Il dispose d’un design réactif avec Tailwind CSS, utilisant le préfixe dark : pour la prise en charge du thème sombre sans JavaScript.