Componentes Mega Menú Componente Mega Menú

Componente Mega Menú

Un componente de mega menú receptivo diseñado en una interfaz de usuario de modo oscuro con un esquema de color en escala de grises para interfaces de redes sociales.

Vista previa

Código HTML

<div class="bg-gray-900 text-white p-5">
    <div class="container mx-auto">
        <div class="flex justify-between items-center">
            <h1 class="text-xl font-bold">Social Media</h1>
            <nav class="hidden md:flex space-x-4">
                <a href="#" class="hover:underline">Home</a>
                <a href="#" class="hover:underline">Profile</a>
                <a href="#" class="hover:underline">Messages</a>
                <a href="#" class="hover:underline">Settings</a>
            </nav>
            <div class="md:hidden cursor-pointer">
                <span class="block w-6 h-1 bg-white mb-1"></span>
                <span class="block w-6 h-1 bg-white mb-1"></span>
                <span class="block w-6 h-1 bg-white"></span>
            </div>
        </div>
        <div class="mt-5 grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="bg-gray-800 p-4 rounded-lg flex flex-col items-center">
                <img src="https://picsum.photos/200/150" alt="Image 1" class="rounded-lg mb-3">
                <p class="text-center">Title 1</p>
            </div>
            <div class="bg-gray-800 p-4 rounded-lg flex flex-col items-center">
                <img src="https://picsum.photos/200/150" alt="Image 2" class="rounded-lg mb-3">
                <p class="text-center">Title 2</p>
            </div>
            <div class="bg-gray-800 p-4 rounded-lg flex flex-col items-center">
                <img src="https://picsum.photos/200/150" alt="Image 3" class="rounded-lg mb-3">
                <p class="text-center">Title 3</p>
            </div>
        </div>
    </div>
</div>

<div class="bg-gray-800 text-gray-300 p-5">
    <div class="container mx-auto">
        <h2 class="text-lg font-semibold">User Profiles</h2>
        <div class="mt-4 grid grid-cols-1 md:grid-cols-4 gap-4">
            <div class="bg-gray-700 p-4 rounded-lg flex flex-col items-center">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="rounded-full w-16 h-16 mb-3">
                <p class="text-center">User 1</p>
            </div>
            <div class="bg-gray-700 p-4 rounded-lg flex flex-col items-center">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 2" class="rounded-full w-16 h-16 mb-3">
                <p class="text-center">User 2</p>
            </div>
            <div class="bg-gray-700 p-4 rounded-lg flex flex-col items-center">
                <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User 3" class="rounded-full w-16 h-16 mb-3">
                <p class="text-center">User 3</p>
            </div>
            <div class="bg-gray-700 p-4 rounded-lg flex flex-col items-center">
                <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="User 4" class="rounded-full w-16 h-16 mb-3">
                <p class="text-center">User 4</p>
            </div>
        </div>
    </div>
</div>

Componentes relacionados

Componente de Mega Menú de Glassmorphism

Mega menú de Glassmorphism para interfaces de tablero con esquema de color triádico. Cuenta con un efecto de vidrio esmerilado, diseño receptivo y compatibilidad con el modo oscuro mediante Tailwind CSS.

Abrir

Componente de Mega Menú Minimalista

Componente de Mega Menú Minimalista con efectos responsivos y soporte de temas oscuros, sin JavaScript.

Abrir

Componente Mega Menú

Mega menú CSS de viento de cola receptivo con diseño 3D, combinación de colores análoga y compatibilidad con el modo oscuro

Abrir