Composant de nuage de balises Neumorphism
Un composant de nuage de balises réactif avec un design Neumorphism, une palette de couleurs pastel et des interactions complexes, conçu pour le commerce électronique. Inclut la prise en charge du mode sombre et utilise Tailwind CSS.
HTML Code
<div class="p-4 dark:bg-gray-800">
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
<div class="col-span-2 md:col-span-3 lg:col-span-4 text-center text-lg font-semibold text-gray-700 dark:text-gray-300">Popular Tags</div>
<div class="bg-gray-200 dark:bg-gray-700 p-3 rounded-lg shadow-neumorphism-light dark:shadow-neumorphism-dark flex flex-wrap gap-2 justify-center">
<span class="bg-pastel-blue text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Electronics</span>
<span class="bg-pastel-green text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Apparel</span>
<span class="bg-pastel-pink text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Home & Garden</span>
<span class="bg-pastel-yellow text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Books</span>
<span class="bg-pastel-purple text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Toys & Games</span>
<span class="bg-pastel-blue text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Beauty</span>
<span class="bg-pastel-green text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Sports</span>
<span class="bg-pastel-pink text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Outdoors</span>
<span class="bg-pastel-yellow text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Automotive</span>
<span class="bg-pastel-purple text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Jewelry</span>
</div>
</div>
</div>
<style>
.shadow-neumorphism-light {
box-shadow: 5px 5px 10px #babecc, -5px -5px 10px #f2f3f7;
}
.dark .shadow-neumorphism-dark {
box-shadow: 5px 5px 10px #333, -5px -5px 10px #555;
}
.shadow-inner-neumorphism-light {
box-shadow: inset 2px 2px 5px #babecc, inset -5px -5px 10px #f2f3f7;
}
.dark .shadow-inner-neumorphism-dark {
box-shadow: inset 2px 2px 5px #333, inset -5px -5px 10px #555;
}
.hover\:shadow-outer-neumorphism-light:hover {
box-shadow: 5px 5px 10px #babecc, -5px -5px 10px #f2f3f7;
}
.dark .hover\:shadow-outer-neumorphism-dark:hover {
box-shadow: 5px 5px 10px #333, -5px -5px 10px #555;
}
.bg-pastel-blue { background-color: #a7c7e7; }
.bg-pastel-green { background-color: #b2dfdb; }
.bg-pastel-pink { background-color: #f8c8dc; }
.bg-pastel-yellow { background-color: #ffecb3; }
.bg-pastel-purple { background-color: #e1bee7; }
</style>Composants associés
Composant de nuage de balises
Un composant de nuage de balises réactif avec des animations attrayantes, utilisant un schéma de couleurs monochromatiques adapté à un portfolio.
Composant de nuage de balises
Un composant de nuage de balises 3D avec des couleurs vives pour les tableaux de bord de visualisation de données.
Composant de nuage de balises
Un composant de nuage de balises réactif avec des couleurs en niveaux de gris et des micro-interactions, conçu pour les interfaces de médias sociaux avec prise en charge du thème sombre.