Componentes Nube de etiquetas Componente de nube de etiquetas

Componente de nube de etiquetas

Un componente de nube de etiquetas diseñado con estilo Neumorphism en escala de grises, adecuado para blogs y consumo de contenido, con elementos interactivos.

Vista previa

Código HTML

<div class="flex flex-col items-center justify-center p-5 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Tag Cloud</h2>
    <div class="flex flex-wrap justify-center gap-4">
        <a href="#" class="bg-white dark:bg-gray-900 rounded-full px-4 py-2 text-gray-800 dark:text-gray-200 shadow-md transform transition hover:scale-105 hover:shadow-lg focus:outline-none">
            Web Development
        </a>
        <a href="#" class="bg-white dark:bg-gray-900 rounded-full px-4 py-2 text-gray-800 dark:text-gray-200 shadow-md transform transition hover:scale-105 hover:shadow-lg focus:outline-none">
            UI/UX Design
        </a>
        <a href="#" class="bg-white dark:bg-gray-900 rounded-full px-4 py-2 text-gray-800 dark:text-gray-200 shadow-md transform transition hover:scale-105 hover:shadow-lg focus:outline-none">
            JavaScript
        </a>
        <a href="#" class="bg-white dark:bg-gray-900 rounded-full px-4 py-2 text-gray-800 dark:text-gray-200 shadow-md transform transition hover:scale-105 hover:shadow-lg focus:outline-none">
            React
        </a>
        <a href="#" class="bg-white dark:bg-gray-900 rounded-full px-4 py-2 text-gray-800 dark:text-gray-200 shadow-md transform transition hover:scale-105 hover:shadow-lg focus:outline-none">
            Tailwind CSS
        </a>
        <a href="#" class="bg-white dark:bg-gray-900 rounded-full px-4 py-2 text-gray-800 dark:text-gray-200 shadow-md transform transition hover:scale-105 hover:shadow-lg focus:outline-none">
            Neumorphism
        </a>
        <a href="#" class="bg-white dark:bg-gray-900 rounded-full px-4 py-2 text-gray-800 dark:text-gray-200 shadow-md transform transition hover:scale-105 hover:shadow-lg focus:outline-none">
            Blogging
        </a>
    </div>
</div>

Componentes relacionados

Acuarela/Componente de nube de etiquetas artísticas

Un componente de nube de etiquetas complejo y receptivo con un estilo de diseño artístico/acuarela y una combinación de colores pastel, adecuado para plataformas de foros/comunidades. Soporta el modo oscuro.

Abrir

Componente de nube de etiquetas

Un componente de nube de etiquetas receptivo diseñado para la interfaz de usuario del modo oscuro, que muestra una cartera con un esquema de color análogo.

Abrir

Componente de nube de etiquetas

Un componente de nube de etiquetas receptivo diseñado con los principios de Material Design, con un esquema de color de alto contraste adecuado para tableros. Incluye soporte para modo oscuro y HTML semántico para accesibilidad. Se incluyen efectos de desplazamiento para la interactividad.

Abrir