<section class="overflow-hidden">
<div class="bg-black">
<div class="container px-4 mx-auto">
<div class="flex items-center justify-between py-5">
<div class="w-auto">
<div class="flex flex-wrap items-center">
<div class="w-auto pr-2">
<a href="#">
<img src="basko-assets/logos/basko-logo-light.png" 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-8">
<li class="mr-14 font-medium text-white hover:text-gray-200 tracking-tight"><a href="#">Features</a></li>
<li class="mr-14 font-medium text-white hover:text-gray-200 tracking-tight"><a href="#">Pricing</a></li>
<li class="mr-8 font-medium text-white hover:text-gray-200 tracking-tight border-r border-gray-700 pr-8"><a href="#">Automation</a></li>
<li class="font-medium text-white hover:text-gray-200 tracking-tight"><a href="#">Customer Login</a></li>
</ul>
</div>
<div class="w-auto hidden lg:block">
<div class="inline-block"><a class="inline-block px-5 py-3 text-white font-semibold text-center tracking-tight bg-indigo-500 hover:bg-indigo-600 rounded-lg focus:ring-4 focus:ring-indigo-300 transition duration-200" href="#">Try 14 Days Free Trial</a></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>
<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-black 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="basko-assets/logos/basko-logo-light.png" alt="">
</a>
</div>
<div class="w-auto p-2">
<a class="navbar-burger text-white" 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="currentColor" 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 font-medium text-white hover:text-gray-200 tracking-tight"><a href="#">Features</a></li>
<li class="mb-12 font-medium text-white hover:text-gray-200 tracking-tight"><a href="#">Pricing</a></li>
<li class="mb-12 font-medium text-white hover:text-gray-200 tracking-tight"><a href="#">Automation</a></li>
<li class="font-medium text-white hover:text-gray-200 tracking-tight"><a href="#">Customer Login</a></li>
</ul>
</div>
<div class="flex flex-col justify-end w-full pb-8"><a class="inline-block px-5 py-3 text-white font-semibold text-center tracking-tight bg-indigo-500 hover:bg-indigo-600 rounded-lg focus:ring-4 focus:ring-indigo-300 transition duration-200" href="#">Try 14 Days Free Trial</a></div>
</div>
</nav>
</div>
</div>
<div class="pt-16 lg:pt-32 pb-24 lg:pb-52 bg-black overflow-hidden">
<div class="container px-4 mx-auto">
<div class="flex flex-wrap -m-8">
<div class="w-full md:w-1/2 p-8">
<div class="md:max-w-lg">
<span class="inline-block mb-8 px-3 py-1 text-white font-semibold bg-gray-600 rounded-full">#1 Brand Building Tool</span>
<h1 class="font-heading mb-12 text-6xl md:text-7xl text-white tracking-tighter">Boost brand's visibility and reach fast.</h1>
<div class="flex flex-wrap -m-2 mb-14">
<div class="w-auto p-2"><a class="inline-block px-5 py-4 text-white font-semibold tracking-tight bg-indigo-500 hover:bg-indigo-600 rounded-lg focus:ring-4 focus:ring-indigo-400 transition duration-200" href="#">Try 14 Days Free Trial</a></div>
<div class="w-auto p-2">
<a class="inline-flex items-center px-5 py-4 bg-transparent hover:bg-indigo-600 border border-gray-600 hover:border-indigo-600 rounded-lg focus:ring-4 focus:ring-indigo-300 transition duration-200" href="#">
<div class="inline-block">
<svg class="mr-2.5" width="18" height="19" viewbox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 12.5L3 13.25C3 14.4926 4.00736 15.5 5.25 15.5L12.75 15.5C13.9926 15.5 15 14.4926 15 13.25L15 12.5M12 9.5L9 12.5M9 12.5L6 9.5M9 12.5L9 3.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
<span class="text-white font-semibold tracking-tight">Download IOS App</span>
</a>
</div>
</div>
<div class="max-w-md">
<div class="flex flex-wrap -m-1.5">
<div class="w-auto p-1.5">
<div class="flex flex-wrap">
<div class="w-auto">
<img src="basko-assets/images/headers/avatar.png" alt="">
</div>
<div class="w-auto -ml-5">
<img src="basko-assets/images/headers/avatar2.png" alt="">
</div>
<div class="w-auto -ml-5">
<img src="basko-assets/images/headers/avatar3.png" alt="">
</div>
</div>
</div>
<div class="flex-1 p-1.5">
<p class="text-white tracking-tight">Join other 12k+ Marketers and start building brands reputation now.</p>
</div>
</div>
</div>
</div>
</div>
<div class="w-full md:w-1/2 p-8">
<img class="transform hover:-translate-y-2 transition duration-500" src="basko-assets/images/headers/dashboard.png" alt="">
</div>
</div>
</div>
</div>
</section>Framework
Tailwind CSS
UI Library
All Libraries
Components
- Advanced inputs 18
- Alert 111
- Application 113
- Banners 76
- Benefits 16
- Blog 143
- Brands 3
- Breadcrumbs 27
- Call to action 227
- Cards 43
- Careers 34
- Contact 117
- Content 90
- Cookies 104
- Dashboards 13
- Download 5
- Dropdowns 4
- E-commerce (orders) 65
- E-commerce (products) 101
- Empty state 4
- FAQ 103
- Features 263
- Footers 163
- Forms 9
- Graphs 58
- HTTP codes 119
- Hero section 184
- How it works 135
- Instagram photos 9
- Integrations 8
- Logo clouds 179
- Modals 35
- Navbar 212
- Navigation (horizontal) 241
- Navigation (vertical) 12
- Newsletter 138
- Notifications 11
- Paginations 16
- Portfolio 93
- Pricing 141
- Product info 5
- Projects 6
- Reviews 36
- Rich text 3
- Search 3
- Sign in / Sign up 201
- Snackbars 10
- Stats 173
- Steps 12
- Tables 91
- Tabs 2
- Team 122
- Testimonials 160
- Users 17
Component #1
Component #2
Component #3
Component #4
Component #5
Component #6
Component #7
Component #8
Component #9
Component #10
The header is the section at the very top of the page. It is not just a navigation bar, which you will find in another category. Tailwind header component is a combination of menu and layout of the first view available to the user. It is a critical section in the viewer's interaction with the page. It determines whether the user stays and explores its content or abandons the session. That is why in Shuffle components we pay great attention to aesthetics and visibility of key information.
Choose from many variations of Tailwind headers. Presented here are variants available in various UI libraries. You will also find many other types of components that will be in the same style. Each library has been designed by a professional designer and coded by our team of developers.
Get access to all Tailwind headers, code and our editor. Try the demo for free!
