Insignes de neumorphisme
Il s’agit d’un composant d’insignes de style Neumorphisme avec une palette de couleurs pastel, conçu pour un portfolio et utilisant Tailwind CSS.
HTML Code
<div class="flex flex-wrap justify-center gap-4 p-4 bg-gray-200 dark:bg-gray-800">
<span class="inline-flex items-center px-3 py-1 text-sm font-medium text-gray-700 bg-gray-200 rounded-full dark:text-gray-200 dark:bg-gray-700 shadow-neumorphism-light dark:shadow-neumorphism-dark">
HTML
</span>
<span class="inline-flex items-center px-3 py-1 text-sm font-medium text-gray-700 bg-gray-200 rounded-full dark:text-gray-200 dark:bg-gray-700 shadow-neumorphism-light dark:shadow-neumorphism-dark">
CSS
</span>
<span class="inline-flex items-center px-3 py-1 text-sm font-medium text-gray-700 bg-gray-200 rounded-full dark:text-gray-200 dark:bg-gray-700 shadow-neumorphism-light dark:shadow-neumorphism-dark">
Tailwind CSS
</span>
nocode
</div>
<style>
.shadow-neumorphism-light {
box-shadow: 5px 5px 10px #a3b1c6, -5px -5px 10px #ffffff;
}
.dark .shadow-neumorphism-dark {
box-shadow: 5px 5px 10px #454545, -5px -5px 10px #3a3a3a;
}
</style>Composants associés
Composant Badges
Un composant de badges minimaliste pour les tableaux de bord, avec des tons de terre et la prise en charge du mode sombre.
Composant Badges
Un composant de badges réactifs avec le style Material Design, la prise en charge du thème sombre et la palette de couleurs Earth Tones pour le contenu du blog.
Composant Badges
Un composant de badge en mode sombre réactif pour le commerce électronique, présentant divers badges avec des schémas de couleurs complémentaires et des éléments interactifs.