Barre de progression du neumorphisme
Une barre de progression de style Neumorphisme pour les portfolios, avec une palette de couleurs pastel, une complexité modérée, une réactivité et une prise en charge du thème sombre. Aucun JavaScript n’est inclus ; le composant est construit avec HTML et Tailwind CSS.
HTML Code
<div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-800 p-4">
<div class="w-full max-w-md bg-gray-200 dark:bg-gray-700 rounded-full shadow-inner dark:shadow-inner-dark overflow-hidden">
<div class="bg-purple-400 text-xs leading-none py-1 text-center text-white rounded-full shadow-neumo-progress dark:shadow-neumo-progress-dark" style="width: 75%"> 75% </div>
</div>
<div class="mt-8 text-gray-700 dark:text-gray-300">
Skill Progress
</div>
</div>
<style>
.shadow-inner {
box-shadow: inset 5px 5px 10px #b0b0b0,
inset -5px -5px 10px #f0f0f0;
}
.dark .shadow-inner-dark {
box-shadow: inset 5px 5px 10px #4a4a4a,
inset -5px -5px 10px #363636;
}
.shadow-neumo-progress {
box-shadow: 5px 5px 10px #a78bfa,
-5px -5px 10px #c084fc;
}
.dark .shadow-neumo-progress-dark {
box-shadow: 5px 5px 10px #6d28d9,
-5px -5px 10px #7c3aed;
}
</style>Composants associés
Barre de progression du neumorphisme
Un composant réactif de barre de progression de style neumorphisme conçu pour les tableaux de bord, intégrant une fonction interactive et prenant en charge le mode sombre.
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.
Barre de progression du mode sombre triadique
Un composant de barre de progression simple et triadique pour le mode sombre, adapté aux blogs et à la consommation de contenu. Il dispose d’un design réactif avec Tailwind CSS, utilisant le préfixe dark : pour la prise en charge du thème sombre sans JavaScript.