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 simple et réactif avec une esthétique monospace/développeur, une palette de couleurs sourdes, conçu pour les sites Web de voyage/tourisme. Inclut la prise en charge du mode sombre.
Composant de nuage de balises rétro
Un composant de nuage de balises réactif utilisant Tailwind CSS, avec une esthétique de design rétro/vintage, une palette de couleurs pastel et une complexité simple. Convient à un portefeuille, y compris la prise en charge du mode sombre.
Composant de nuage de balises pour l’agriculture/l’élevage
Un composant de nuage de balises minimaliste et réactif conçu pour les sites Web agricoles et agricoles, avec des couleurs neutres froides et la prise en charge du mode sombre.