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>