Componentes Navegación Componente de navegación de Glassmorphism

Componente de navegación de Glassmorphism

Un componente de navegación de estilo glassmorphism para sitios de comercio electrónico, con colores monocromáticos, diseño responsivo y compatibilidad con el modo oscuro mediante Tailwind CSS.

Vista previa

Código HTML

<nav class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg shadow-lg md:flex md:justify-between md:items-center py-4 px-6 fixed w-full z-10 dark:bg-gray-800 dark:bg-opacity-10 dark:backdrop-filter dark:backdrop-blur-lg">
    <div class="flex justify-between items-center">
        <a href="#" class="text-gray-700 text-xl font-bold md:text-2xl dark:text-white">Your Logo</a>
        <div class="flex md:hidden">
            <button type="button" class="text-gray-600 hover:text-gray-800 focus:outline-none focus:text-gray-800 dark:text-gray-200 dark:hover:text-white">
                <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
                    <path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"/>
                </svg>
            </button>
        </div>
    </div>

    <div class="hidden md:flex flex-col md:flex-row md:mx-6">
        <a href="#" class="my-1 text-gray-700 hover:text-gray-900 md:mx-4 md:my-0 dark:text-gray-200 dark:hover:text-white">Home</a>
        <a href="#" class="my-1 text-gray-700 hover:text-gray-900 md:mx-4 md:my-0 dark:text-gray-200 dark:hover:text-white">Shop</a>
        <a href="#" class="my-1 text-gray-700 hover:text-gray-900 md:mx-4 md:my-0 dark:text-gray-200 dark:hover:text-white">Categories</a>
        <a href="#" class="my-1 text-gray-700 hover:text-gray-900 md:mx-4 md:my-0 dark:text-gray-200 dark:hover:text-white">Contact</a>
    </div>

    <div class="relative hidden md:block">
        <span class="absolute inset-y-0 left-0 flex items-center pl-3">
            <svg class="h-5 w-5 text-gray-400" viewBox="0 0 24 24" fill="none">
                <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
        </span>

        <input type="text" class="w-full border rounded-md pl-10 pr-4 py-2 focus:border-blue-500 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-white" placeholder="Search">
    </div>
</nav>

Componentes relacionados

Componente de navegación

Un componente de navegación responsivo diseñado para un portafolio, con microinteracciones y compatibilidad con temas oscuros.

Abrir

Componente de navegación de redes sociales

Un componente de navegación responsivo diseñado para interfaces de redes sociales, con una estética de Material Design que utiliza un tema oscuro con Tailwind CSS.

Abrir

Componente de navegación de lujo

Un componente de navegación elegante y receptivo para marcas de moda y belleza, con un sofisticado diseño en blanco y negro con un color de acento brillante, compatibilidad con el modo oscuro y elementos mínimos.

Abrir