Volet Indicateurs de progrès
Un composant d’indicateurs de progression réactif avec un style glassmorphism, avec des éléments translucides givrés ressemblant à du verre et des effets de flou, prenant en charge le thème sombre à l’aide de Tailwind CSS.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900">
<div class="bg-white bg-opacity-20 backdrop-blur-lg border border-white border-opacity-30 rounded-lg shadow-lg p-6 max-w-md w-full">
<h2 class="text-center text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Progress Indicators</h2>
<div class="w-full mb-4">
<div class="flex justify-between mb-1">
<span class="text-sm text-gray-700 dark:text-gray-300">Task 1</span>
<span class="text-sm text-gray-700 dark:text-gray-300">75%</span>
</div>
<div class="bg-gray-300 rounded-full h-2.5 dark:bg-gray-700">
<div class="bg-blue-600 h-2.5 rounded-full" style="width: 75%"></div>
</div>
</div>
<div class="w-full mb-4">
<div class="flex justify-between mb-1">
<span class="text-sm text-gray-700 dark:text-gray-300">Task 2</span>
<span class="text-sm text-gray-700 dark:text-gray-300">50%</span>
</div>
<div class="bg-gray-300 rounded-full h-2.5 dark:bg-gray-700">
<div class="bg-green-600 h-2.5 rounded-full" style="width: 50%"></div>
</div>
</div>
<div class="w-full mb-4">
<div class="flex justify-between mb-1">
<span class="text-sm text-gray-700 dark:text-gray-300">Task 3</span>
<span class="text-sm text-gray-700 dark:text-gray-300">25%</span>
</div>
<div class="bg-gray-300 rounded-full h-2.5 dark:bg-gray-700">
<div class="bg-red-600 h-2.5 rounded-full" style="width: 25%"></div>
</div>
</div>
<div class="flex items-center justify-between mt-4">
<img src="https://picsum.photos/50" alt="Placeholder Image" class="rounded-full">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full">
</div>
</div>
</div>Composants associés
Indicateurs de progrès Composante 33
Un indicateur de progression réactif avec des micro-interactions dans Tailwind CSS, avec prise en charge du thème sombre.
Composant de la barre de progression 3D
Style avec des effets 3D, Tailwind CSS, un design réactif et la prise en charge du mode sombre.
Volet Indicateurs de progrès
Il s’agit d’un composant d’indicateur de progression de style Material Design utilisant Tailwind CSS, avec des effets réactifs et la prise en charge du thème sombre.