Componentes
Nube de etiquetas
Etiqueta: Nube, Componente, Vidrio, Morfismo, Monocromático, Complejo, Comercio electrónico
Etiqueta: Nube, Componente, Vidrio, Morfismo, Monocromático, Complejo, Comercio electrónico
Componente de nube de etiquetas de Glassmorphism para comercio electrónico
Código HTML
<div class="flex flex-wrap justify-center p-8 bg-gray-200 dark:bg-gray-900 min-h-screen items-center">
<div class="bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl p-6 shadow-xl max-w-2xl w-full">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Popular Tags</h2>
<div class="flex flex-wrap gap-3 justify-center">
<span class="px-4 py-2 rounded-full bg-gray-500 bg-opacity-30 text-gray-800 dark:text-white text-sm font-semibold dark:bg-gray-600 dark:bg-opacity-30 backdrop-filter backdrop-blur-sm cursor-pointer hover:bg-opacity-50 dark:hover:bg-opacity-50 transition duration-300 ease-in-out">Electronics</span>
<span class="px-4 py-2 rounded-full bg-gray-500 bg-opacity-30 text-gray-800 dark:text-white text-sm font-semibold dark:bg-gray-600 dark:bg-opacity-30 backdrop-filter backdrop-blur-sm cursor-pointer hover:bg-opacity-50 dark:hover:bg-opacity-50 transition duration-300 ease-in-out">Apparel</span>
<span class="px-4 py-2 rounded-full bg-gray-500 bg-opacity-30 text-gray-800 dark:text-white text-sm font-semibold dark:bg-gray-600 dark:bg-opacity-30 backdrop-filter backdrop-blur-sm cursor-pointer hover:bg-opacity-50 dark:hover:bg-opacity 50 transition duration-300 ease-in-out">Home Goods</span>
<span class="px-4 py-2 rounded-full bg-gray-500 bg-opacity-30 text-gray-800 dark:text-white text-sm font-semibold dark:bg-gray-600 dark:bg-opacity-30 backdrop-filter backdrop-blur-sm cursor-pointer hover:bg-opacity-50 dark:hover:bg-opacity-50 transition duration-300 ease-in-out">Books</span>
<span class="px-4 py-2 rounded-full bg-gray-500 bg-opacity-30 text-gray-800 dark:text-white text-sm font-semibold dark:bg-gray-600 dark:bg-opacity-30 backdrop-filter backdrop-blur-sm cursor-pointer hover:bg-opacity-50 dark:hover:bg-opacity-50 transition duration-300 ease-in-out">Sports</span>
<span class="px-4 py-2 rounded-full bg-gray-500 bg-opacity-30 text-gray-800 dark:text-white text-sm font-semibold dark:bg-gray-600 dark:bg-opacity-30 backdrop-filter backdrop-blur-sm cursor-pointer hover:bg-opacity-50 dark:hover:bg-opacity-50 transition duration-300 ease-in-out">Beauty</span>
<span class="px-4 py-2 rounded-full bg-gray-500 bg-opacity-30 text-gray-800 dark:text-white text-sm font-semibold dark:bg-gray-600 dark:bg-opacity-30 backdrop-filter backdrop-blur-sm cursor-pointer hover:bg-opacity-50 dark:hover:bg-opacity-50 transition duration-300 ease-in-out">Outdoors</span>
<span class="px-4 py-2 rounded-full bg-gray-500 bg-opacity-30 text-gray-800 dark:text-white text-sm font-semibold dark:bg-gray-600 dark:bg-opacity-30 backdrop-filter backdrop-blur-sm cursor-pointer hover:bg-opacity-50 dark:hover:bg-opacity-50 transition duration-300 ease-in-out">Gaming</span>
</div>
</div>
</div>Componentes relacionados
Componente de nube de etiquetas
Un componente de Tag Cloud receptivo diseñado para interfaces de redes sociales con una interfaz de usuario de modo oscuro y una combinación de colores pastel.
Componente de nube de etiquetas
Un componente de Tag Cloud complejo y receptivo con microinteracciones, diseñado para un panel de control, utilizando un esquema de color en escala de grises. Soporta el modo oscuro.
Componente de nube de etiquetas
Un componente de nube de etiquetas diseñado con estilo Neumorphism, que utiliza un esquema de color monocromático para fines de comercio electrónico y admite un tema oscuro con un diseño receptivo.