Componentes Navegación pegajosa Componente de navegación pegajosa

Componente de navegación pegajosa

Un componente de navegación pegajoso diseñado para el modo oscuro con efectos responsivos mediante Tailwind CSS.

Vista previa

Código HTML

<header class="bg-gray-900 text-white shadow sticky top-0 z-50">
    <div class="container mx-auto p-4 flex justify-between items-center">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3" />
            <h1 class="text-xl font-semibold">My Website</h1>
        </div>
        <nav class="hidden md:flex space-x-4">
            <a href="#" class="hover:text-gray-400">Home</a>
            <a href="#" class="hover:text-gray-400">About</a>
            <a href="#" class="hover:text-gray-400">Services</a>
            <a href="#" class="hover:text-gray-400">Contact</a>
        </nav>
        <div class="md:hidden">
            <button class="text-gray-400 hover:text-gray-500 focus:outline-none">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
                </svg>
            </button>
        </div>
    </div>
</header>

<main class="bg-gray-800 text-white min-h-screen p-4">
    <section>
        <h2 class="text-2xl font-bold mb-4">Welcome to My Website</h2>
        <p>Here is some content!</p>
        <img src="https://picsum.photos/800/300" alt="Placeholder" class="mt-4 rounded-lg shadow-lg" />
    </section>
</main>

<footer class="bg-gray-900 text-gray-400 text-center p-4">
    <p>&copy; 2023 My Website</p>
</footer>

Componentes relacionados

Componente de navegación pegajosa

Una barra de navegación fija y receptiva que sigue las pautas de Material Design, con un modo oscuro.

Abrir

Brutalismo Navegación pegajosa

Un complejo componente de navegación pegajosa con diseño brutalista, combinación de colores monocromática, diseñado para carteras, con diseño receptivo y compatibilidad con modo oscuro mediante Tailwind CSS.

Abrir

Componente de navegación pegajosa

Una barra de navegación fija simple, limpia y confiable adecuada para sitios web corporativos y profesionales, especialmente bolsas de trabajo y plataformas de carrera. Cuenta con colores de alto contraste, capacidad de respuesta y compatibilidad con el modo oscuro.

Abrir