Main Navbar Style Using Tailwind UI
A ‘Main Navbar Style’ component designed with Tailwind offers a stylish and functional navigation bar that enhances the overall look and user experience of a website.
navbar
Loading component...
107 lines
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
rel="stylesheet">
<style>
body {
font-family: "Plus Jakarta Sans", sans-serif;
}
</style>
<!-- inspired design by https://dribbble.com/shots/22886872-Zephyr-AI-CRM-Website-Landing-Page -->
<header
class="relative flex flex-col max-w-screen-xl px-4 py-4 mt-12 overflow-hidden border border-gray-400 lg:mx-auto lg:flex-row lg:items-center rounded-3xl">
<a href="#" class="flex items-center text-2xl font-black whitespace-nowrap">
<span class="w-8 mr-2">
<img src="/images/JOJj79gp_Djhwdp_ZOKLL.png" alt="" />
</span>
O'conner
</a>
<input type="checkbox" class="hidden peer" id="navbar-open" achecked />
<label class="absolute cursor-pointer top-5 right-5 lg:hidden" for="navbar-open">
<span class="sr-only">Toggle Navigation</span>
<svg class="h-7 w-7" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 12h16M4 18h16">
</path>
</svg>
</label>
<nav aria-label="Header Navigation"
class="flex flex-col items-center w-full overflow-hidden transition-all peer-checked:pt-8 peer-checked:max-h-60 max-h-0 lg:ml-24 lg:max-h-full lg:flex-row">
<ul class="flex flex-col items-center w-full space-y-2 font-medium lg:flex-row lg:justify-center lg:space-y-0">
<li class="lg:mr-2">
<a class="transition focus:outline-none hover:border hover:border-black focus:ring-1 focus:ring-blue-700 focus:ring-offset-2 rounded-full bg-gray-100 flex py-2 text-gray-600 pl-1.5 pr-5 items-center hover:bg-[#D0F500] hover:text-black group font-semibold"
href="#">
<span class="p-1 mr-2 bg-white rounded-full group-hover:bg-black">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-5 h-5 text-gray-600 group-hover:text-[#D0F500]">
<path stroke-linecap="round" stroke-linejoin="round"
d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
</svg>
</span>
Home
</a>
</li>
<li class="lg:mr-2">
<a class="transition focus:outline-none hover:border hover:border-black focus:ring-1 focus:ring-blue-700 focus:ring-offset-2 rounded-full bg-gray-100 flex py-2 text-gray-600 pl-1.5 pr-5 items-center hover:bg-[#D0F500] hover:text-black group font-semibold"
href="#">
<span class="p-1 mr-2 bg-white rounded-full group-hover:bg-black">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-5 h-5 text-gray-600 group-hover:text-[#D0F500]">
<path stroke-linecap="round" stroke-linejoin="round"
d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21" />
</svg>
</span>
Company
</a>
</li>
<li class="lg:mr-2">
<a class="transition focus:outline-none hover:border hover:border-black focus:ring-1 focus:ring-blue-700 focus:ring-offset-2 rounded-full bg-gray-100 flex py-2 text-gray-600 pl-1.5 pr-5 items-center hover:bg-[#D0F500] hover:text-black group font-semibold"
href="#">
<span class="p-1 mr-2 bg-white rounded-full group-hover:bg-black">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-5 h-5 text-gray-600 group-hover:text-[#D0F500]">
<path stroke-linecap="round" stroke-linejoin="round"
d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
</svg>
</span>
Product
</a>
</li>
<li class="lg:mr-2">
<a class="transition focus:outline-none hover:border hover:border-black focus:ring-1 focus:ring-blue-700 focus:ring-offset-2 rounded-full bg-gray-100 flex py-2 text-gray-600 pl-1.5 pr-5 items-center hover:bg-[#D0F500] hover:text-black group font-semibold"
href="#">
<span class="p-1 mr-2 bg-white rounded-full group-hover:bg-black">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-5 h-5 text-gray-600 group-hover:text-[#D0F500]">
<path stroke-linecap="round" stroke-linejoin="round"
d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
</svg>
</span>
Blogs
</a>
</li>
</ul>
<hr class="w-full mt-4 lg:hidden" />
<div class="flex items-center">
<a href="#" title=""
class="whitespace-nowrap rounded-3xl text-black border border-black px-5 py-2.5 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:ring-offset-2 flex items-center bg-[#D0F500] font-bold">
Get Started
<span class="p-1 ml-2 bg-black rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6 text-[#D0F500]">
<path stroke-linecap="round" stroke-linejoin="round"
d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941" />
</svg>
</span>
</a>
</div>
</nav>
</header>