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 du mode sombre
Un composant de barre de progression réactif en mode sombre pour les sites Web d’entreprise, utilisant des couleurs vives et des éléments interactifs.
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.
Barre de progression
Composant de barre de progression avec conception de micro-interactions. Comprend la prise en charge des effets réactifs et des thèmes sombres en utilisant uniquement HTML et CSS (Tailwind CSS).