Componentes Nube de etiquetas Componente de nube de etiquetas

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.

Vista previa

Código HTML

<div class="bg-gray-900 text-gray-300 p-4 rounded-lg">
    <h2 class="text-xl font-bold mb-4">Tag Cloud</h2>
    <div class="flex flex-wrap gap-2">
        <span class="bg-gray-700 hover:bg-gray-600 transition duration-300 rounded-full px-3 py-1 text-sm font-semibold">#WebDesign</span>
        <span class="bg-gray-700 hover:bg-gray-600 transition duration-300 rounded-full px-3 py-1 text-sm font-semibold">#UI/UX</span>
        <span class="bg-gray-700 hover:bg-gray-600 transition duration-300 rounded-full px-3 py-1 text-sm font-semibold">#Development</span>
        <span class="bg-gray-700 hover:bg-gray-600 transition duration-300 rounded-full px-3 py-1 text-sm font-semibold">#Branding</span>
        <span class="bg-gray-700 hover:bg-gray-600 transition duration-300 rounded-full px-3 py-1 text-sm font-semibold">#Photography</span>
        <span class="bg-gray-700 hover:bg-gray-600 transition duration-300 rounded-full px-3 py-1 text-sm font-semibold">#Illustration</span>
        <span class="bg-gray-700 hover:bg-gray-600 transition duration-300 rounded-full px-3 py-1 text-sm font-semibold">#Typography</span>
    </div>
    <div class="mt-6">
        <h3 class="text-lg font-semibold">Featured Work</h3>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mt-4">
            <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
                <img class="w-full h-32 object-cover" src="https://picsum.photos/200/200?random=1" alt="Portfolio Item" />
                <div class="p-4">
                    <h4 class="font-bold">Project Title 1</h4>
                    <p class="text-gray-400">Short description of the project.</p>
                    <div class="flex items-center mt-2">
                        <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
                        <span class="ml-2 text-sm">by Author Name</span>
                    </div>
                </div>
            </div>
            <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
                <img class="w-full h-32 object-cover" src="https://picsum.photos/200/200?random=2" alt="Portfolio Item" />
                <div class="p-4">
                    <h4 class="font-bold">Project Title 2</h4>
                    <p class="text-gray-400">Short description of the project.</p>
                    <div class="flex items-center mt-2">
                        <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" />
                        <span class="ml-2 text-sm">by Author Name</span>
                    </div>
                </div>
            </div>
            <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
                <img class="w-full h-32 object-cover" src="https://picsum.photos/200/200?random=3" alt="Portfolio Item" />
                <div class="p-4">
                    <h4 class="font-bold">Project Title 3</h4>
                    <p class="text-gray-400">Short description of the project.</p>
                    <div class="flex items-center mt-2">
                        <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" />
                        <span class="ml-2 text-sm">by Author Name</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Componentes relacionados

Componente de nube de etiquetas de la Bauhaus

Un componente de nube de etiquetas complejo y receptivo con un diseño inspirado en la Bauhaus, que utiliza neutros fríos, adecuado para plataformas educativas con soporte para modo oscuro.

Abrir

Componente de nube de etiquetas

Un componente de nube de etiquetas diseñado con un estilo skeuomórfico, efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS.

Abrir

Componente de nube de etiquetas de Glassmorphism

Un componente de nube de etiquetas de estilo glassmorphism con esquema de color púrpura/violeta, adecuado para carteras. Cuenta con elementos translúcidos esmerilados, diseño receptivo y compatibilidad con el modo oscuro.

Abrir