Componente de nube de etiquetas de neumorfismo
Un componente de nube de etiquetas receptivo con diseño de neumorfismo, combinación de colores pastel e interacciones complejas, adaptado para el comercio electrónico. Incluye soporte para el modo oscuro y usa Tailwind CSS.
Código HTML
<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>Componentes relacionados
Componente de nube de etiquetas (modo oscuro, pastel)
Un componente de nube de etiquetas responsivo con soporte para modo oscuro, usando colores pastel. Adecuado para una cartera.
Componente de nube de etiquetas retro
Un componente de nube de etiquetas receptivo que usa Tailwind CSS, con una estética de diseño retro / vintage, combinación de colores pastel y complejidad simple. Adecuado para una cartera, incluida la compatibilidad con el modo oscuro.
Componente de nube de etiquetas
Un componente de nube de etiquetas simple, receptivo y vibrante diseñado con los principios de Bauhaus para sitios web comerciales y corporativos, con formas geométricas y colores primarios de alta saturación con soporte para modo oscuro.