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.
HTML Code
<div class="flex items-center justify-center h-screen bg-gray-900">
<div class="w-full max-w-md">
<h2 class="text-white text-lg font-semibold mb-4">Progress Bar</h2>
<div class="relative pt-1">
<div class="flex items-center justify-between mb-2">
<span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-teal-600 bg-teal-200">
70%
</span>
<span class="text-xs font-semibold inline-block text-gray-400">
7/10
</span>
</div>
<div class="h-2 bg-gray-700 rounded">
<div class="h-full bg-teal-500 rounded" style="width: 70%;"></div>
</div>
</div>
<p class="text-gray-400 text-sm mt-2">Loading...</p>
</div>
</div>Composants associés
Barre de progression minimaliste
Un composant de barre de progression au design minimaliste et plat aux couleurs pastel, adapté aux sites Web professionnels d’entreprise ou d’entreprise. Il a un design réactif et prend en charge le mode sombre à l’aide de Tailwind CSS.
Barre de progression du mode sombre
Un composant de barre de progression réactif conçu pour le mode sombre à l’aide de Tailwind CSS, avec un design élégant et la prise en charge du thème sombre.
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.