Volet Indicateurs de progrès
Un composant simple d’indicateurs de progression inspiré de l’esthétique rétro/vintage des années 80 et 90, utilisant une palette de couleurs complémentaires. Conçu pour les interfaces de médias sociaux et réactif avec prise en charge du thème sombre.
HTML Code
<div class="flex flex-col items-center justify-center p-6 bg-gray-800 dark:bg-gray-900 rounded-lg shadow-lg max-w-md mx-auto">
<h2 class="text-2xl font-bold text-white mb-4">Progress Indicators</h2>
<div class="w-full bg-gray-700 dark:bg-gray-600 rounded-lg">
<div class="bg-blue-500 dark:bg-blue-400 h-4 rounded-lg" style="width: 70%;"></div>
</div>
<div class="flex justify-between w-full text-sm mt-2 text-gray-300 dark:text-gray-200">
<span>0%</span>
<span>70%</span>
</div>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-blue-500">
<div class="ml-3">
<p class="text-md text-white">User Name</p>
<p class="text-sm text-gray-400 dark:text-gray-500">Status: Active</p>
</div>
</div>
<p class="text-gray-500 dark:text-gray-400 mt-2 text-center">Loading data...</p>
<img src="https://picsum.photos/200/100?random=1" alt="Random Image" class="mt-4 rounded-lg shadow-md">
</div>Composants associés
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.
Volet Indicateurs de progrès
Un indicateur de progression de style neumorphique adapté aux interfaces de médias sociaux, doté d’une mise en page simple et d’un design réactif avec prise en charge du mode sombre.
BrutalisteNiveaux de grisProgressBar
Une barre de progression en niveaux de gris de style brutaliste pour le contenu du blog, avec un design simple, une prise en charge du mode sombre et une réactivité.