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.
HTML Code
<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-md">
<h2 class="text-white text-lg font-semibold mb-4">Progress Bar</h2>
<div class="relative pt-1">
<div class="flex justify-between mb-1 text-sm text-white">
<span>0%</span>
<span>100%</span>
</div>
<div class="h-2 bg-gray-600 rounded">
<div class="bg-pastel-green-500 h-full rounded" style="width: 70%;"></div>
</div>
</div>
<div class="flex items-center justify-between mt-4">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-white">John Doe</span>
</div>
<span class="text-gray-400 dark:text-gray-500">In Progress</span>
</div>
</div>Composants associés
Composant de la barre de progression
Un composant simple de barre de progression stylisé avec un morphisme de verre et des couleurs monochromes, adapté aux sites Web d’entreprise et d’entreprise, avec prise en charge du mode sombre.
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 triadique minimaliste
Une barre de progression minimaliste et réactive avec une palette de couleurs triadique et une prise en charge du thème sombre, adaptée aux applications de médias sociaux.