Headers

Utiliza estos componentes de header para incluir navegación y agregar dinamismo a tu sitio web. Ofrecemos una amplia variedad de estilos para elegir.

Simple Header

src/index.html

        <div>
<nav class="flex items-center justify-between p-6 lg:px-8 bg-gray-100 w-full border-b-4 border-gray-400">
    <div class="hidden lg:flex lg:flex-1">
        <a href="#" class="-m-1.5 p-1.5 flex flex-row items-center gap-x-2">
            <img src="https://flowbite.com/docs/images/logo.svg" class="h-8" alt="Company Logo">
            <span class="self-center text-2xl font-semibold whitespace-nowrap text-gray-950">Company Name</span>
        </a>
    </div>
    <div class="lg:flex lg:gap-x-12">
        <ul class="inline-flex gap-x-4 font-bold text-md text-gray-950">
            <li class="border-b-2 border-transparent hover:border-b-2 hover:border-black transition duration-300">
                <a href="#" class=" text-gray-950 ">Home</a>
            </li>
            <li class="border-b-2 border-transparent hover:border-b-2 hover:border-black transition duration-300">
                <a href="#" class=" text-gray-950 ">About us</a>
            </li>
            <li class="border-b-2 border-transparent hover:border-b-2 hover:border-black transition duration-300">
                <a href="#" class=" text-gray-950 ">Blog</a>
            </li>
            <li class="border-b-2 border-transparent hover:border-b-2 hover:border-black transition duration-300">
                <a href="#" class=" text-gray-950 ">Contact</a>
            </li>
        </ul>
    </div>
    <div class="lg:flex lg:flex-1 lg:justify-end gap-x-2">
        <button class="border-2 border-transparent bg-gray-600 text-md font-medium text-gray-100 py-2 px-4 rounded-lg hover:border-gray-600 hover:bg-gray-300 hover:text-gray-950 
        transition duration-500">
            Log in
        </button>
    </div>
</nav>
</div>
    

Without Name Header

src/index.html

        <div>
<nav class="flex items-center justify-between p-6 lg:px-8 bg-gray-100 w-full border-b-4 border-gray-400">
    <div class="hidden lg:flex lg:flex-1">
        <a href="#" class="-m-1.5 p-1.5 flex flex-row items-center gap-x-2">
            <img src="https://flowbite.com/docs/images/logo.svg" class="h-8" alt="Company Logo">
        </a>
    </div>
    <div class="lg:flex lg:gap-x-12">
        <ul class="inline-flex gap-x-4 font-bold text-md text-gray-950">
            <li class="border-b-2 border-transparent hover:border-b-2 hover:border-black transition duration-300">
                <a href="#" class=" text-gray-950 ">Home</a>
            </li>
            <li class="border-b-2 border-transparent hover:border-b-2 hover:border-black transition duration-300">
                <a href="#" class=" text-gray-950 ">About us</a>
            </li>
            <li class="border-b-2 border-transparent hover:border-b-2 hover:border-black transition duration-300">
                <a href="#" class=" text-gray-950 ">Blog</a>
            </li>
            <li class="border-b-2 border-transparent hover:border-b-2 hover:border-black transition duration-300">
                <a href="#" class=" text-gray-950 ">Contact</a>
            </li>
        </ul>
    </div>
    <div class="lg:flex lg:flex-1 lg:justify-end gap-x-2">
        <button class="border-2 border-transparent bg-gray-600 text-md font-medium text-gray-100 py-2 px-4 rounded-lg hover:border-gray-600 hover:bg-gray-300 hover:text-gray-950 
        transition duration-500">
            Log in
        </button>
        <button class="border-2 border-gray-600 bg-gray-300 text-md font-medium text-gray-950 py-2 px-4 rounded-lg hover:border-transparent hover:bg-gray-600 hover:text-gray-100 
        transition duration-500">
            Sign Up
        </button>
    </div>
</nav>
</div>