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 réactifs conçu avec un style 3D utilisant des tons Terre, avec des éléments interactifs adaptés à un tableau de bord.
Composant Badges
Un composant simple de badges de style Glassmorphism pour les réseaux sociaux, avec des effets de verre dépoli avec du flou, des couleurs analogues et la prise en charge du mode sombre à l’aide de Tailwind CSS. Il est réactif et utilise picsum.photos pour les images et randomuser.me pour les avatars si nécessaire. Aucun JavaScript n’est inclus.
Composant Badges
Composant Badges avec prise en charge du thème sombre réactif pour le commerce électronique.