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 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.
Barre de progression
Composant de barre de progression avec conception de micro-interactions. Comprend la prise en charge des effets réactifs et des thèmes sombres en utilisant uniquement HTML et CSS (Tailwind CSS).
ProgressBarComponent
Un composant de barre de progression simple, propre et réactif avec des couleurs néon/électriques pour les sites Web d’alimentation/restaurants, avec prise en charge du mode sombre et conception typographique suisse/internationale.