<section class="overflow-hidden">
<div class="flex items-center justify-between px-7 xl:px-40 py-5 bg-white">
<div class="w-auto">
<div class="flex flex-wrap items-center">
<div class="w-auto mr-14">
<a href="#">
<img src="flaro-assets/logos/flaro-logo-black.svg" alt="">
</a>
</div>
</div>
</div>
<div class="w-auto">
<div class="flex flex-wrap items-center">
<div class="w-auto hidden lg:block">
<ul class="flex items-center mr-16">
<li class="mr-9 font-medium hover:text-gray-700"><a href="#">Features</a></li>
<li class="mr-9 font-medium hover:text-gray-700"><a href="#">Solutions</a></li>
<li class="mr-9 font-medium hover:text-gray-700"><a href="#">Resources</a></li>
<li class="font-medium hover:text-gray-700"><a href="#">Pricing</a></li>
</ul>
</div>
<div class="w-auto hidden lg:block">
<div class="inline-block">
<button class="py-3 px-5 w-full text-white font-semibold rounded-xl focus:ring focus:ring-indigo-300 bg-indigo-600 hover:bg-indigo-700 transition ease-in-out duration-200" type="button">Try 14 Days Free Trial</button>
</div>
</div>
<div class="w-auto lg:hidden">
<a href="#">
<svg class="navbar-burger text-indigo-600" width="51" height="51" viewbox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="56" height="56" rx="28" fill="currentColor"></rect>
<path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="hidden navbar-menu fixed top-0 left-0 bottom-0 w-4/6 sm:max-w-xs z-50">
<div class="navbar-backdrop fixed inset-0 bg-gray-800 opacity-80"></div>
<nav class="relative z-10 px-9 pt-8 bg-white h-full overflow-y-auto">
<div class="flex flex-wrap justify-between h-full">
<div class="w-full">
<div class="flex items-center justify-between -m-2">
<div class="w-auto p-2">
<a class="inline-block" href="#">
<img src="flaro-assets/logos/flaro-logo-black.svg" alt="">
</a>
</div>
<div class="w-auto p-2">
<a class="navbar-burger" href="#">
<svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 18L18 6M6 6L18 18" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col justify-center py-16 w-full">
<ul>
<li class="mb-12"><a class="font-medium hover:text-gray-700" href="#">Features</a></li>
<li class="mb-12"><a class="font-medium hover:text-gray-700" href="#">Solutions</a></li>
<li class="mb-12"><a class="font-medium hover:text-gray-700" href="#">Resources</a></li>
<li><a class="font-medium hover:text-gray-700" href="#">Pricing</a></li>
</ul>
</div>
<div class="flex flex-col justify-end w-full pb-8">
<div class="flex flex-wrap">
<div class="w-full">
<div class="block">
<button class="py-3 px-5 w-full text-white font-semibold rounded-xl focus:ring focus:ring-indigo-300 bg-indigo-600 hover:bg-indigo-700 transition ease-in-out duration-200" type="button">Try 14 Days Free Trial</button>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
</section>Framework
Tailwind CSS
UI Library
All Libraries
Components
- Alert 101
- Application 108
- Banners 73
- Benefits 16
- Blog 132
- Breadcrumbs 24
- Call to action 199
- Cards 29
- Careers 32
- Confirmation 6
- Contact 106
- Content 85
- Cookies 97
- Dashboards 13
- Download 5
- E-commerce (orders) 35
- E-commerce (products) 76
- FAQ 95
- Features 227
- Footers 145
- Forms 9
- Graphs 38
- HTTP codes 107
- Hero section 164
- How it works 129
- Instagram photos 5
- Integrations 5
- Logo clouds 179
- Modals 29
- Navbar 209
- Navigation (horizontal) 215
- Navigation (vertical) 7
- Newsletter 129
- Notifications 7
- Paginations 12
- Portfolio 93
- Pricing 128
- Product info 5
- Projects 6
- Reviews 32
- Rich text 3
- Sign in / Sign up 181
- Snackbars 10
- Stats 153
- Tables 75
- Team 117
- Testimonials 144
- Users 17
Component #1
Component #2
Component #3
Component #4
Component #5
Component #6
Component #7
Component #8
Component #9
Component #10
A well-designed navigation component determines how easily users navigate your site. This will affect both the conversion of the page and its position in SEO.
Browse the Tailwind navigation component variants available in our editor. Under each of them is clear code that you can easily edit. Components are sorted by UI libraries, which consist of many other elements in the same style. Each of these libraries was created by our talented designers to allow you to create diverse and pretty pages.
See all variations of Tailwind navigation components and the code underneath them in Shuffle Editor.
