Composant de la barre de progression
Un composant de barre de progression réactif conçu dans le style Material Design, incorporant des schémas de couleurs pastel pour les vitrines de portfolio. Il prend en charge le mode sombre.
HTML Code
<div class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
<h2 class="text-xl font-semibold mb-2 text-gray-700 dark:text-gray-200">Project Progress</h2>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full">
<div class="bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-400 h-4 rounded-full" style="width: 70%;"></div>
</div>
<div class="flex justify-between w-full mt-2 text-xs text-gray-600 dark:text-gray-400">
<span>0%</span>
<span>70%</span>
<span>100%</span>
</div>
<div class="mt-4">
<img src="https://picsum.photos/100/100" alt="Project Screenshot" class="rounded-lg shadow-md">
</div>
<div class="mt-2 flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-md mr-2">
<span class="text-gray-700 dark:text-gray-200">Reviewed by John Doe</span>
</div>
</div>Composants associés
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.
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.
Composant de la barre de progression 3D
Un composant de barre de progression réactif conçu pour les interfaces de réseaux sociaux, avec un effet 3D, une palette de couleurs monochromatiques et la prise en charge du mode sombre, construit à l’aide de Tailwind CSS.