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.
Código HTML
<div class="dark:bg-gray-900 bg-white p-6 rounded-lg shadow-xl">
<h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200">Tag Cloud</h2>
<div class="flex flex-wrap gap-3">
<div class="tag-item group relative cursor-pointer transform transition duration-300 hover:scale-105 hover:shadow-lg">
<span class="block bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-full text-sm font-medium transition duration-300 group-hover:bg-gray-300 dark:group-hover:bg-gray-600">Technology</span>
<div class="absolute inset-0 rounded-full ring-2 ring-transparent group-hover:ring-gray-400 dark:group-hover:ring-gray-500 transition duration-300"></div>
</div>
<div class="tag-item group relative cursor-pointer transform transition duration-300 hover:scale-105 hover:shadow-lg">
<span class="block bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-full text-sm font-medium transition duration-300 group-hover:bg-gray-300 dark:group-hover:bg-gray-600">Finance</span>
<div class="absolute inset-0 rounded-full ring-2 ring-transparent group-hover:ring-gray-400 dark:group-hover:ring-gray-500 transition duration-300"></div>
</div>
<div class="tag-item group relative cursor-pointer transform transition duration-300 hover:scale-105 hover:shadow-lg">
<span class="block bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-full text-sm font-medium transition duration-300 group-hover:bg-gray-300 dark:group-hover:bg-gray-600">Healthcare</span>
<div class="absolute inset-0 rounded-full ring-2 ring-transparent group-hover:ring-gray-400 dark:group-hover:ring-gray-500 transition duration-300"></div>
</div>
<div class="tag-item group relative cursor-pointer transform transition duration-300 hover:scale-105 hover:shadow-lg">
<span class="block bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-full text-sm font-medium transition duration-300 group-hover:bg-gray-300 dark:group-hover:bg-gray-600">Education</span>
<div class="absolute inset-0 rounded-full ring-2 ring-transparent group-hover:ring-gray-400 dark:group-hover:ring-gray-500 transition duration-300"></div>
</div>
<div class="tag-item group relative cursor-pointer transform transition duration-300 hover:scale-105 hover:shadow-lg">
<span class="block bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-full text-sm font-medium transition duration-300 group-hover:bg-gray-300 dark:group-hover:bg-gray-600">Sports</span>
<div class="absolute inset-0 rounded-full ring-2 ring-transparent group-hover:ring-gray-400 dark:group-hover:ring-gray-500 transition duration-300"></div>
</div>
<div class="tag-item group relative cursor-pointer transform transition duration-300 hover:scale-105 hover:shadow-lg">
<span class="block bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-full text-sm font-medium transition duration-300 group-hover:bg-gray-300 dark:group-hover:bg-gray-600">Science</span>
<div class="absolute inset-0 rounded-full ring-2 ring-transparent group-hover:ring-gray-400 dark:group-hover:ring-gray-500 transition duration-300"></div>
</div>
<div class="tag-item group relative cursor-pointer transform transition duration-300 hover:scale-105 hover:shadow-lg">
<span class="block bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-full text-sm font-medium transition duration-300 group-hover:bg-gray-300 dark:group-hover:bg-gray-600">Art</span>
<div class="absolute inset-0 rounded-full ring-2 ring-transparent group-hover:ring-gray-400 dark:group-hover:ring-gray-500 transition duration-300"></div>
</div>
<div class="tag-item group relative cursor-pointer transform transition duration-300 hover:scale-105 hover:shadow-lg">
<span class="block bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-full text-sm font-medium transition duration-300 group-hover:bg-gray-300 dark:group-hover:bg-gray-600">Travel</span>
<div class="absolute inset-0 rounded-full ring-2 ring-transparent group-hover:ring-gray-400 dark:group-hover:ring-gray-500 transition duration-300"></div>
</div>
<div class="tag-item group relative cursor-pointer transform transition duration-300 hover:scale-105 hover:shadow-lg">
<span class="block bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-full text-sm font-medium transition duration-300 group-hover:bg-gray-300 dark:group-hover:bg-gray-600">Food</span>
<div class="absolute inset-0 rounded-full ring-2 ring-transparent group-hover:ring-gray-400 dark:group-hover:ring-gray-500 transition duration-300"></div>
</div>
</div>
</div>Componentes relacionados
Componente de nube de etiquetas
Un componente de nube de etiquetas receptivo con colores en escala de grises y microinteracciones, diseñado para interfaces de redes sociales con soporte para temas oscuros.
Componente 13 de la nube de etiquetas
Un componente de Tag Cloud diseñado con el estilo Neumorphism. Presenta un estilo de interfaz de usuario suave con elementos que parecen sobresalir del fondo usando sombras sutiles. El componente admite diseño responsivo y temas oscuros.
Componente de nube de etiquetas
Un componente de nube de etiquetas neumórficas diseñado para una cartera, que muestra etiquetas con un esquema de color monocromático, un diseño receptivo y compatibilidad con el modo oscuro mediante Tailwind CSS.