Componentes Barra de navegación Componente de la barra de navegación

Componente de la barra de navegación

Un componente de barra de navegación responsivo simple diseñado para un tablero, con un esquema de color monocromático y microinteracciones. Incluye un soporte de modo oscuro con efectos de desplazamiento para animaciones atractivas.

Vista previa

Código HTML

<nav class="bg-gray-800 dark:bg-gray-900 shadow-lg">
    <div class="max-w-7xl mx-auto px-4">
        <div class="flex justify-between items-center h-16">
            <div class="flex-shrink-0">
                <h1 class="text-white text-2xl">Dashboard</h1>
            </div>
            <div class="hidden md:block">
                <div class="flex items-center space-x-4">
                    <a href="#" class="text-gray-300 hover:text-white transition duration-200 ease-in-out">Home</a>
                    <a href="#" class="text-gray-300 hover:text-white transition duration-200 ease-in-out">Profile</a>
                    <a href="#" class="text-gray-300 hover:text-white transition duration-200 ease-in-out">Settings</a>
                    <a href="#" class="text-gray-300 hover:text-white transition duration-200 ease-in-out">Logout</a>
                </div>
            </div>
            <div class="flex md:hidden">
                <button class="text-gray-300 hover:text-white focus:outline-none">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
                    </svg>
                </button>
            </div>
        </div>
    </div>
</nav>
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
    <h2 class="text-white text-xl mb-4">Welcome to your Dashboard</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded shadow">
            <h3 class="text-white text-lg">Data Visualization</h3>
            <img src="https://picsum.photos/300/200" alt="Visualization" class="mt-2 rounded" />
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded shadow">
            <h3 class="text-white text-lg">Control Panel</h3>
            <img src="https://picsum.photos/300/201" alt="Control" class="mt-2 rounded" />
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded shadow">
            <h3 class="text-white text-lg">User Insights</h3>
            <img src="https://picsum.photos/300/202" alt="Insights" class="mt-2 rounded" />
        </div>
    </div>
</div>

Componentes relacionados

Barra de navegación del blog

Barra de navegación responsiva con soporte de modo oscuro para sitios web de blogs/contenido. Presenta un diseño minimalista / plano con una combinación de colores pastel.

Abrir

Barra de navegación de redes sociales retro/vintage

Barra de navegación retro / vintage para redes sociales con combinación de colores análoga, complejidad simple, responsiva y soporte de temas oscuros.

Abrir

Barra de navegación Skeuomorphic

Una barra de navegación responsiva simple para redes sociales con un estilo de diseño esqueuomórfico, que utiliza un esquema de color análogo y admite el modo oscuro.

Abrir