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.
HTML Code
<div class="flex flex-col items-center justify-center p-6">
<div class="w-full max-w-xs p-4 bg-gray-200 rounded-lg shadow-lg dark:bg-gray-800 dark:shadow-md">
<h3 class="text-center text-lg font-semibold text-gray-800 dark:text-gray-200">Profile Completion</h3>
<div class="my-4">
<div class="flex justify-between">
<span class="text-sm text-gray-600 dark:text-gray-400">0%</span>
<span class="text-sm text-gray-600 dark:text-gray-400">100%</span>
</div>
<div class="h-2 bg-gray-300 rounded-lg dark:bg-gray-700">
<div class="h-full bg-gradient-to-r from-green-400 to-blue-500 rounded-lg" style="width: 70%;"></div>
</div>
</div>
<div class="flex items-center justify-between">
<img src="https://picsum.photos/40" alt="User Avatar" class="rounded-full border-2 border-gray-300 dark:border-gray-600" />
<span class="text-sm text-gray-800 dark:text-gray-200">User Name</span>
</div>
</div>
</div>Composants associés
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.
Memphis_Weather_Progress_Indicator
Un composant d’indicateur de progression météorologique avec un style de design Memphis, avec un noir et blanc audacieux avec une couleur d’accent vive, adapté à l’affichage des données climatiques. Il comprend un design réactif et la prise en charge du mode sombre.
Volet Indicateurs de progrès
Indicateurs de progression inspirés du papier/de l’impression pour une place de marché, avec des couleurs bonbons/sucrées. Conception complexe avec plusieurs étapes, mise en page réactive et prise en charge du mode sombre.