Navbar Responsive Mega Menu Using Tailwind UI
Elevate navigation with our ‘Navbar Responsive Mega Menu’ expertly crafted in Tailwind CSS. Seamlessly responsive, it offers an immersive, stylish, and user-friendly menu experience across all devices. inspiration design by Jamshid from Dribbble.
navbar
Loading component...
792 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>
<div class="antialiased text-white bg-gray-200 bg-no-repeat">
<header class="container flex items-center justify-between px-4 py-6 mx-auto bg-gray-900 md:justify-around">
<a href="/" class="text-xl font-bold text-white">Company</a>
<nav class="hidden md:flex">
<ul class="flex items-center justify-center font-semibold">
<li class="relative px-3 py-2 group">
<button class="cursor-default hover:opacity-50">Products</button>
<div
class="absolute top-0 -left-48 transition group-hover:translate-y-5 translate-y-0 opacity-0 invisible group-hover:opacity-100 group-hover:visible duration-500 ease-in-out group-hover:transform z-50 min-w-[560px] transform">
<div class="relative w-full p-6 bg-white shadow-xl top-6 rounded-xl">
<div
class="w-10 h-10 bg-white transform rotate-45 absolute top-0 z-0 translate-x-0 transition-transform group-hover:translate-x-[12rem] duration-500 ease-in-out rounded-sm">
</div>
<div class="relative z-10 justify-between">
<div class="grid items-stretch grid-cols-2 gap-6">
<div>
<p class="uppercase text-gray-500 font-medium text-[13px]">Main product</p>
<ul class="mt-3 text-[15px] space-y-4">
<li>
<a href="#"
class="flex items-center p-2 -mx-2 space-x-2 font-bold text-gray-800 transition duration-300 ease-in-out rounded-lg hover:bg-green-50 hover:text-green-600">
<div class="p-4 bg-red-200 rounded-xl">
<svg class="w-5 h-5 text-red-500 fill-current" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24">
<path
d="M20 17H22V19H2V17H4V10C4 5.58172 7.58172 2 12 2C16.4183 2 20 5.58172 20 10V17ZM9 21H15V23H9V21Z">
</path>
</svg>
</div>
<div>
Notifications
<p class="text-xs font-normal text-gray-500">Real time notifications always keep you up to
date.</p>
</div>
</a>
</li>
<li>
<a href="#"
class="flex items-center p-2 -mx-2 space-x-2 font-bold text-green-600 transition duration-300 ease-in-out rounded-lg bg-green-50">
<div class="p-4 bg-green-200 rounded-xl">
<svg class="w-5 h-5 text-green-500 fill-current" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24">
<path
d="M16 2L21 7V21.0082C21 21.556 20.5551 22 20.0066 22H3.9934C3.44476 22 3 21.5447 3 21.0082V2.9918C3 2.44405 3.44495 2 3.9934 2H16ZM11 7V17H13V7H11ZM15 11V17H17V11H15ZM7 13V17H9V13H7Z">
</path>
</svg>
</div>
<div>
Analytics
<p class="text-xs font-normal text-gray-500">Analyze yoyr data to make more informed
business decision.</p>
</div>
</a>
</li>
<li>
<a href="#"
class="flex items-center p-2 -mx-2 space-x-2 font-bold text-gray-800 transition duration-300 ease-in-out rounded-lg hover:bg-green-50 hover:text-green-600">
<div class="p-4 bg-indigo-200 rounded-xl">
<svg class="w-5 h-5 text-indigo-500 fill-current" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24">
<path d="M3 3H11V11H3V3ZM3 13H11V21H3V13ZM13 3H21V11H13V3ZM13 13H21V21H13V13Z"></path>
</svg>
</div>
<div>
Intregrations
<p class="text-xs font-normal text-gray-500">Real time notifications always keep you up to
date.</p>
</div>
</a>
</li>
</ul>
</div>
<div>
<p class="uppercase tracking-wider text-gray-500 font-medium text-[13px]">Second product</p>
<ul class="mt-3 text-[15px] space-y-4">
<li>
<a href="#"
class="flex items-center p-2 -mx-2 space-x-2 font-semibold text-gray-800 transition duration-300 ease-in-out rounded-lg hover:bg-gradient-to-br hover:bg-green-50 hover:text-green-600">
<div class="p-4 bg-pink-200 rounded-xl">
<svg class="w-5 h-5 text-pink-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 22H4C3.44772 22 3 21.5523 3 21V3C3 2.44772 3.44772 2 4 2H20C20.5523 2 21 2.44772 21 3V21C21 21.5523 20.5523 22 20 22ZM8 7V9H16V7H8ZM8 11V13H16V11H8ZM8 15V17H13V15H8Z"></path></svg>
</div>
<div>
Documentation
<p class="text-xs font-normal text-gray-500">Comprehensive documentation will help you.</p>
</div>
</a>
</li>
<li>
<a href="#"
class="flex items-center p-2 -mx-2 space-x-2 font-semibold text-gray-800 transition duration-300 ease-in-out rounded-lg hover:bg-gradient-to-br hover:bg-green-50 hover:text-green-600">
<div class="p-4 bg-yellow-200 rounded-xl">
<svg class="w-5 h-5 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 1L20.2169 2.82598C20.6745 2.92766 21 3.33347 21 3.80217V13.7889C21 15.795 19.9974 17.6684 18.3282 18.7812L12 23L5.6718 18.7812C4.00261 17.6684 3 15.795 3 13.7889V3.80217C3 3.33347 3.32553 2.92766 3.78307 2.82598L12 1ZM16.4524 8.22183L11.5019 13.1709L8.67421 10.3431L7.25999 11.7574L11.5026 16L17.8666 9.63604L16.4524 8.22183Z"></path></svg>
</div>
<div>
Security
<p class="text-xs font-normal text-gray-500">To ensure privacy, all information are encrypted and secure.</p>
</div>
</a>
</li>
<li>
<a href="#"
class="flex p-2 -mx-2 space-x-2 font-semibold text-gray-800 transition duration-300 ease-in-out rounded-lg hover:bg-gradient-to-br hover:bg-green-50 hover:text-green-600">
<div class="p-4 bg-purple-200 rounded-xl">
<svg class="w-5 h-5 text-purple-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 8C22.1046 8 23 8.89543 23 10V14C23 15.1046 22.1046 16 21 16H19.9381C19.446 19.9463 16.0796 23 12 23V21C15.3137 21 18 18.3137 18 15V9C18 5.68629 15.3137 3 12 3C8.68629 3 6 5.68629 6 9V16H3C1.89543 16 1 15.1046 1 14V10C1 8.89543 1.89543 8 3 8H4.06189C4.55399 4.05369 7.92038 1 12 1C16.0796 1 19.446 4.05369 19.9381 8H21ZM7.75944 15.7849L8.81958 14.0887C9.74161 14.6662 10.8318 15 12 15C13.1682 15 14.2584 14.6662 15.1804 14.0887L16.2406 15.7849C15.0112 16.5549 13.5576 17 12 17C10.4424 17 8.98882 16.5549 7.75944 15.7849Z"></path></svg>
</div>
<div>
Support
<p class="text-xs font-normal text-gray-500">Need help? Our customer support is there to help you.</p>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="flex items-center justify-between w-full p-4 mt-8 bg-green-50 rounded-xl">
<div class="space-y-2">
<h1 class="text-base font-bold text-green-800">Pricing</h1>
<p class="text-xs text-green-600 w-80">Learn more about our pricing model and get started with business.</p>
</div>
<button class="bg-green-500 py-2.5 px-4 rounded-lg font-medium text-sm text-green-50 hover:text-white hover:bg-green-800">Learn more</button>
</div>
</div>
</div>
</div>
</li>
<li class="relative px-3 py-2 group">
<button class="cursor-default hover:opacity-50">Features</button>
<div
class="absolute top-0 -left-2 transition group-hover:translate-y-5 translate-y-0 opacity-0 invisible group-hover:opacity-100 group-hover:visible duration-500 ease-in-out group-hover:transform z-50 min-w-[260px] transform">
<div class="relative w-full p-6 bg-white shadow-xl top-6 rounded-xl">
<div
class="absolute top-0 z-0 w-10 h-10 transition-transform duration-500 ease-in-out transform rotate-45 -translate-x-4 bg-white rounded-sm group-hover:translate-x-3">
</div>
<div class="relative z-10">
<p class="uppercase tracking-wider text-gray-500 font-medium text-[13px]">Best Features</p>
<ul class="mt-3 text-[15px] space-y-4">
<li>
<a href="#"
class="flex items-center p-2 -mx-2 space-x-2 font-bold text-gray-800 transition duration-300 ease-in-out rounded-lg hover:bg-green-50 hover:text-green-600">
<div class="p-4 bg-red-200 rounded-xl">
<svg class="w-5 h-5 text-red-500 fill-current" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24">
<path
d="M20 17H22V19H2V17H4V10C4 5.58172 7.58172 2 12 2C16.4183 2 20 5.58172 20 10V17ZM9 21H15V23H9V21Z">
</path>
</svg>
</div>
<div>
Notifications
<p class="text-xs font-normal text-gray-500">Real time notifications always keep you up to
date.</p>
</div>
</a>
</li>
<li>
<a href="#"
class="flex items-center p-2 -mx-2 space-x-2 font-bold text-green-600 transition duration-300 ease-in-out rounded-lg bg-green-50">
<div class="p-4 bg-green-200 rounded-xl">
<svg class="w-5 h-5 text-green-500 fill-current" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24">
<path
d="M16 2L21 7V21.0082C21 21.556 20.5551 22 20.0066 22H3.9934C3.44476 22 3 21.5447 3 21.0082V2.9918C3 2.44405 3.44495 2 3.9934 2H16ZM11 7V17H13V7H11ZM15 11V17H17V11H15ZM7 13V17H9V13H7Z">
</path>
</svg>
</div>
<div>
Analytics
<p class="text-xs font-normal text-gray-500">Analyze yoyr data to make more informed
business decision.</p>
</div>
</a>
</li>
<li>
<a href="#"
class="flex items-center p-2 -mx-2 space-x-2 font-bold text-gray-800 transition duration-300 ease-in-out rounded-lg hover:bg-green-50 hover:text-green-600">
<div class="p-4 bg-indigo-200 rounded-xl">
<svg class="w-5 h-5 text-indigo-500 fill-current" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24">
<path d="M3 3H11V11H3V3ZM3 13H11V21H3V13ZM13 3H21V11H13V3ZM13 13H21V21H13V13Z"></path>
</svg>
</div>
<div>
Intregrations
<p class="text-xs font-normal text-gray-500">Real time notifications always keep you up to
date.</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="relative px-3 py-2 group">
<button class="cursor-default hover:opacity-50">Benefits</button>
<div
class="absolute top-0 -left-48 transition group-hover:translate-y-5 translate-y-0 opacity-0 invisible group-hover:opacity-100 group-hover:visible duration-500 ease-in-out group-hover:transform z-50 min-w-[560px] transform">
<div class="relative w-full p-6 bg-white shadow-xl top-6 rounded-xl">
<div
class="w-10 h-10 bg-white transform rotate-45 absolute top-0 z-0 translate-x-0 transition-transform group-hover:translate-x-[12.65rem] duration-500 ease-in-out rounded-sm">
</div>
<div class="relative z-10">
<a href="#"
class="block p-2 -mx-2 font-semibold text-gray-800 transition duration-300 ease-in-out rounded-lg hover:bg-gradient-to-br hover:from-indigo-50 hover:to-pink-50 hover:text-indigo-600">
Documentation
<p class="font-normal text-gray-500">Start integrating in no time</p>
</a>
<div class="grid grid-cols-2 gap-6 mt-6">
<div>
<p class="uppercase text-gray-500 font-medium text-[13px]">Main product</p>
<ul class="mt-3 text-[15px] space-y-4">
<li>
<a href="#"
class="flex items-center p-2 -mx-2 space-x-2 font-bold text-gray-800 transition duration-300 ease-in-out rounded-lg hover:bg-green-50 hover:text-green-600">
<div class="p-2 bg-red-200 rounded-xl">
<svg class="w-4 h-4 text-red-500 fill-current" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24">
<path
d="M20 17H22V19H2V17H4V10C4 5.58172 7.58172 2 12 2C16.4183 2 20 5.58172 20 10V17ZM9 21H15V23H9V21Z">
</path>
</svg>
</div>
<div>
Notifications
</div>
</a>
</li>
<li>
<a href="#"
class="flex items-center p-2 -mx-2 space-x-2 font-bold text-green-600 transition duration-300 ease-in-out rounded-lg bg-green-50">
<div class="p-2 bg-green-200 rounded-xl">
<svg class="w-4 h-4 text-green-500 fill-current" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24">
<path
d="M16 2L21 7V21.0082C21 21.556 20.5551 22 20.0066 22H3.9934C3.44476 22 3 21.5447 3 21.0082V2.9918C3 2.44405 3.44495 2 3.9934 2H16ZM11 7V17H13V7H11ZM15 11V17H17V11H15ZM7 13V17H9V13H7Z">
</path>
</svg>
</div>
<div>
Analytics
</div>
</a>
</li>
<li>
<a href="#"
class="flex items-center p-2 -mx-2 space-x-2 font-bold text-gray-800 transition duration-300 ease-in-out rounded-lg hover:bg-green-50 hover:text-green-600">
<div class="p-2 bg-indigo-200 rounded-xl">
<svg class="w-4 h-4 text-indigo-500 fill-current" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24">
<path d="M3 3H11V11H3V3ZM3 13H11V21H3V13ZM13 3H21V11H13V3ZM13 13H21V21H13V13Z"></path>
</svg>
</div>
<div>
Intregrations
date.</p>
</div>
</a>
</li>
</ul>
</div>
<div>
<p class="uppercase tracking-wider text-gray-500 font-medium text-[13px]">Second product</p>
<ul class="mt-3 text-[15px] space-y-4">
<li>
<a href="#"
class="flex items-center p-2 -mx-2 space-x-2 font-semibold text-gray-800 transition duration-300 ease-in-out rounded-lg hover:bg-gradient-to-br hover:bg-green-50 hover:text-green-600">
<div class="p-2 bg-pink-200 rounded-xl">
<svg class="w-4 h-4 text-pink-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 22H4C3.44772 22 3 21.5523 3 21V3C3 2.44772 3.44772 2 4 2H20C20.5523 2 21 2.44772 21 3V21C21 21.5523 20.5523 22 20 22ZM8 7V9H16V7H8ZM8 11V13H16V11H8ZM8 15V17H13V15H8Z"></path></svg>
</div>
<div>
Documentation
</div>
</a>
</li>
<li>
<a href="#"
class="flex items-center p-2 -mx-2 space-x-2 font-semibold text-gray-800 transition duration-300 ease-in-out rounded-lg hover:bg-gradient-to-br hover:bg-green-50 hover:text-green-600">
<div class="p-2 bg-yellow-200 rounded-xl">
<svg class="w-4 h-4 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 1L20.2169 2.82598C20.6745 2.92766 21 3.33347 21 3.80217V13.7889C21 15.795 19.9974 17.6684 18.3282 18.7812L12 23L5.6718 18.7812C4.00261 17.6684 3 15.795 3 13.7889V3.80217C3 3.33347 3.32553 2.92766 3.78307 2.82598L12 1ZM16.4524 8.22183L11.5019 13.1709L8.67421 10.3431L7.25999 11.7574L11.5026 16L17.8666 9.63604L16.4524 8.22183Z"></path></svg>
</div>
<div>
Security
</div>
</a>
</li>
<li>
<a href="#"
class="flex p-2 -mx-2 space-x-2 font-semibold text-gray-800 transition duration-300 ease-in-out rounded-lg hover:bg-gradient-to-br hover:bg-green-50 hover:text-green-600">
<div class="p-2 bg-purple-200 rounded-xl">
<svg class="w-4 h-4 text-purple-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 8C22.1046 8 23 8.89543 23 10V14C23 15.1046 22.1046 16 21 16H19.9381C19.446 19.9463 16.0796 23 12 23V21C15.3137 21 18 18.3137 18 15V9C18 5.68629 15.3137 3 12 3C8.68629 3 6 5.68629 6 9V16H3C1.89543 16 1 15.1046 1 14V10C1 8.89543 1.89543 8 3 8H4.06189C4.55399 4.05369 7.92038 1 12 1C16.0796 1 19.446 4.05369 19.9381 8H21ZM7.75944 15.7849L8.81958 14.0887C9.74161 14.6662 10.8318 15 12 15C13.1682 15 14.2584 14.6662 15.1804 14.0887L16.2406 15.7849C15.0112 16.5549 13.5576 17 12 17C10.4424 17 8.98882 16.5549 7.75944 15.7849Z"></path></svg>
</div>
<div>
Support
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="relative px-3 py-2 group">
<button class="cursor-default hover:opacity-50">Supports</button>
<div
class="absolute top-0 -left-2 transition group-hover:translate-y-5 translate-y-0 opacity-0 invisible group-hover:opacity-100 group-hover:visible duration-500 ease-in-out group-hover:transform z-50 min-w-[200px] transform">
<div class="relative w-full p-6 bg-white shadow-xl top-6 rounded-xl">
<div
class="absolute top-0 z-0 w-10 h-10 transition-transform duration-500 ease-in-out transform rotate-45 -translate-x-4 bg-white rounded-sm group-hover:translate-x-3">
</div>
<div class="relative z-10">
<ul class="mt-3 text-[15px] space-y-4">
<li>
<a href="#"
class="flex items-center p-2 -mx-2 space-x-2 font-bold text-gray-800 transition duration-300 ease-in-out rounded-lg hover:bg-green-50 hover:text-green-600">
<div>
Notifications
</div>
</a>
</li>
<li>
<a href="#"
class="flex items-center p-2 -mx-2 space-x-2 font-bold text-green-600 transition duration-300 ease-in-out rounded-lg bg-green-50">
<div>
Analytics
</div>
</a>
</li>
<li>
<a href="#"
class="flex items-center p-2 -mx-2 space-x-2 font-bold text-gray-800 transition duration-300 ease-in-out rounded-lg hover:bg-green-50 hover:text-green-600">
<div>
Intregrations
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="relative px-3 py-2 group">
<a href="#" class="cursor-default hover:opacity-50">Pricing
</a>
</li>
</ul>
</nav>
<nav class="hidden md:flex">
<ul>
<li>
<a href="#" class="flex items-center px-3 py-2 font-semibold bg-white rounded-full bg-opacity-10 group">
<span class="mr-2">Get Started</span>
<svg class="stroke-current" width="10" height="10" stroke-width="2" viewBox="0 0 10 10" aria-hidden="true">
<g fill-rule="evenodd">
<path class="transition duration-200 ease-in-out opacity-0 group-hover:opacity-100" d="M0 5h7"></path>
<path
class="transition duration-200 ease-in-out opacity-100 group-hover:transform group-hover:translate-x-1"
d="M1 1l4 4-4 4"></path>
</g>
</svg>
</a>
</li>
</ul>
</nav>
<div class="flex items-center space-x-4 md:hidden md:space-x-0">
<a href="#" class="flex items-center px-3 py-2 font-semibold bg-white rounded-full md:hidden bg-opacity-10 group">
<span class="mr-2">Get Started</span>
<svg class="stroke-current" width="10" height="10" stroke-width="2" viewBox="0 0 10 10" aria-hidden="true">
<g fill-rule="evenodd">
<path class="transition duration-200 ease-in-out opacity-0 group-hover:opacity-100" d="M0 5h7"></path>
<path
class="transition duration-200 ease-in-out opacity-100 group-hover:transform group-hover:translate-x-1"
d="M1 1l4 4-4 4"></path>
</g>
</svg>
</a>
<button id="mobile-menu-button" class="md:hidden">
<svg class="w-6 h-6 text-white fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M3 4H21V6H3V4ZM9 11H21V13H9V11ZM3 18H21V20H3V18Z"></path>
</svg>
</button>
</div>
</header>
<div id="mobile-menu" class="hidden w-full min-h-screen bg-gray-600 md:hidden">
<nav class="p-4">
<ul class="flex flex-col items-start justify-start w-full gap-2 font-semibold">
<li class="relative w-full">
<button
class="flex items-center w-full p-4 focus:outline-none hover:bg-gray-100 rounded-xl hover:text-gray-600 dropdown-toggle">
Products
<svg class="w-4 h-4 ml-2 stroke-current" fill="none" stroke="currentColor" stroke-width="1.5"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path>
</svg>
</button>
<div class="hidden w-full p-4 mt-2 bg-white rounded-lg dropdown">
<div class="relative z-10">
<div class="grid items-stretch grid-cols-1 gap-6">
<div>
<p class="uppercase text-gray-500 font-medium text-[13px]">Main product</p>
<ul class="mt-3 text-[15px] space-y-4">
<li>
<a href="#"
class="flex items-center p-2 -mx-2 space-x-2 font-bold text-gray-800 transition duration-300 ease-in-out rounded-lg hover:bg-green-50 hover:text-green-600">
<div class="p-4 bg-red-200 rounded-xl">
<svg class="w-5 h-5 text-red-500 fill-current" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24">
<path
d="M20 17H22V19H2V17H4V10C4 5.58172 7.58172 2 12 2C16.4183 2 20 5.58172 20 10V17ZM9 21H15V23H9V21Z">
</path>
</svg>
</div>
<div>
Notifications
<p class="text-xs font-normal text-gray-500">Real time notifications always keep you up to
date.</p>
</div>
</a>
</li>
<li>
<a href="#"
class="flex items-center p-2 -mx-2 space-x-2 font-bold text-green-600 transition duration-300 ease-in-out rounded-lg bg-green-50">
<div class="p-4 bg-green-200 rounded-xl">
<svg class="w-5 h-5 text-green-500 fill-current" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24">
<path
d="M16 2L21 7V21.0082C21 21.556 20.5551 22 20.0066 22H3.9934C3.44476 22 3 21.5447 3 21.0082V2.9918C3 2.44405 3.44495 2 3.9934 2H16ZM11 7V17H13V7H11ZM15 11V17H17V11H15ZM7 13V17H9V13H7Z">
</path>
</svg>
</div>
<div>
Analytics
<p class="text-xs font-normal text-gray-500">Analyze yoyr data to make more informed
business decision.</p>
</div>
</a>
</li>
<li>
<a href="#"
class="flex items-center p-2 -mx-2 space-x-2 font-bold text-gray-800 transition duration-300 ease-in-out rounded-lg hover:bg-green-50 hover:text-green-600">
<div class="p-4 bg-indigo-200 rounded-xl">
<svg class="w-5 h-5 text-indigo-500 fill-current" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24">
<path d="M3 3H11V11H3V3ZM3 13H11V21H3V13ZM13 3H21V11H13V3ZM13 13H21V21H13V13Z"></path>
</svg>
</div>
<div>
Intregrations
<p class="text-xs font-normal text-gray-500">Real time notifications always keep you up to
date.</p>
</div>
</a>
</li>
</ul>
</div>
<div>
<p class="uppercase tracking-wider text-gray-500 font-medium text-[13px]">Second product</p>
<ul class="mt-3 text-[15px] space-y-4">
<li>
<a href="#"
class="flex items-center p-2 -mx-2 space-x-2 font-semibold text-gray-800 transition duration-300 ease-in-out rounded-lg hover:bg-gradient-to-br hover:bg-green-50 hover:text-green-600">
<div class="p-4 bg-pink-200 rounded-xl">
<svg class="w-5 h-5 text-pink-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 22H4C3.44772 22 3 21.5523 3 21V3C3 2.44772 3.44772 2 4 2H20C20.5523 2 21 2.44772 21 3V21C21 21.5523 20.5523 22 20 22ZM8 7V9H16V7H8ZM8 11V13H16V11H8ZM8 15V17H13V15H8Z"></path></svg>
</div>
<div>
Documentation
<p class="text-xs font-normal text-gray-500">Comprehensive documentation will help you.</p>
</div>
</a>
</li>
<li>
<a href="#"
class="flex items-center p-2 -mx-2 space-x-2 font-semibold text-gray-800 transition duration-300 ease-in-out rounded-lg hover:bg-gradient-to-br hover:bg-green-50 hover:text-green-600">
<div class="p-4 bg-yellow-200 rounded-xl">
<svg class="w-5 h-5 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 1L20.2169 2.82598C20.6745 2.92766 21 3.33347 21 3.80217V13.7889C21 15.795 19.9974 17.6684 18.3282 18.7812L12 23L5.6718 18.7812C4.00261 17.6684 3 15.795 3 13.7889V3.80217C3 3.33347 3.32553 2.92766 3.78307 2.82598L12 1ZM16.4524 8.22183L11.5019 13.1709L8.67421 10.3431L7.25999 11.7574L11.5026 16L17.8666 9.63604L16.4524 8.22183Z"></path></svg>
</div>
<div>
Security
<p class="text-xs font-normal text-gray-500">To ensure privacy, all information are encrypted and secure.</p>
</div>
</a>
</li>
<li>
<a href="#"
class="flex p-2 -mx-2 space-x-2 font-semibold text-gray-800 transition duration-300 ease-in-out rounded-lg hover:bg-gradient-to-br hover:bg-green-50 hover:text-green-600">
<div class="p-4 bg-purple-200 rounded-xl">
<svg class="w-5 h-5 text-purple-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 8C22.1046 8 23 8.89543 23 10V14C23 15.1046 22.1046 16 21 16H19.9381C19.446 19.9463 16.0796 23 12 23V21C15.3137 21 18 18.3137 18 15V9C18 5.68629 15.3137 3 12 3C8.68629 3 6 5.68629 6 9V16H3C1.89543 16 1 15.1046 1 14V10C1 8.89543 1.89543 8 3 8H4.06189C4.55399 4.05369 7.92038 1 12 1C16.0796 1 19.446 4.05369 19.9381 8H21ZM7.75944 15.7849L8.81958 14.0887C9.74161 14.6662 10.8318 15 12 15C13.1682 15 14.2584 14.6662 15.1804 14.0887L16.2406 15.7849C15.0112 16.5549 13.5576 17 12 17C10.4424 17 8.98882 16.5549 7.75944 15.7849Z"></path></svg>
</div>
<div>
Support
<p class="text-xs font-normal text-gray-500">Need help? Our customer support is there to help you.</p>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="flex-col items-center justify-start w-full p-4 mt-8 space-y-4 bg-green-50 rounded-xl">
<div class="space-y-2">
<h1 class="text-base font-bold text-green-800">Pricing</h1>
<p class="text-xs text-green-600">Learn more about our pricing model and get started with business.</p>
</div>
<button class="bg-green-500 py-2.5 px-4 rounded-lg font-medium text-sm text-green-50 hover:text-white hover:bg-green-800">Learn more</button>
</div>
</div>
</div>
</li>
<li class="relative w-full">
<button
class="flex items-center w-full p-4 focus:outline-none hover:bg-gray-100 rounded-xl hover:text-gray-600 dropdown-toggle">
Features
<svg class="w-4 h-4 ml-2 stroke-current" fill="none" stroke="currentColor" stroke-width="1.5"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path>
</svg>
</button>
<div class="hidden w-full p-4 mt-2 bg-white rounded-lg dropdown">
<div class="relative z-10">
<p class="uppercase tracking-wider text-gray-500 font-medium text-[13px]">Best Features</p>
<ul class="mt-3 text-[15px] space-y-4">
<li>
<a href="#"
class="flex items-center p-2 -mx-2 space-x-2 font-bold text-gray-800 transition duration-300 ease-in-out rounded-lg hover:bg-green-50 hover:text-green-600">
<div class="p-4 bg-red-200 rounded-xl">
<svg class="w-5 h-5 text-red-500 fill-current" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24">
<path
d="M20 17H22V19H2V17H4V10C4 5.58172 7.58172 2 12 2C16.4183 2 20 5.58172 20 10V17ZM9 21H15V23H9V21Z">
</path>
</svg>
</div>
<div>
Notifications
<p class="text-xs font-normal text-gray-500">Real time notifications always keep you up to
date.</p>
</div>
</a>
</li>
<li>
<a href="#"
class="flex items-center p-2 -mx-2 space-x-2 font-bold text-green-600 transition duration-300 ease-in-out rounded-lg bg-green-50">
<div class="p-4 bg-green-200 rounded-xl">
<svg class="w-5 h-5 text-green-500 fill-current" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24">
<path
d="M16 2L21 7V21.0082C21 21.556 20.5551 22 20.0066 22H3.9934C3.44476 22 3 21.5447 3 21.0082V2.9918C3 2.44405 3.44495 2 3.9934 2H16ZM11 7V17H13V7H11ZM15 11V17H17V11H15ZM7 13V17H9V13H7Z">
</path>
</svg>
</div>
<div>
Analytics
<p class="text-xs font-normal text-gray-500">Analyze yoyr data to make more informed
business decision.</p>
</div>
</a>
</li>
<li>
<a href="#"
class="flex items-center p-2 -mx-2 space-x-2 font-bold text-gray-800 transition duration-300 ease-in-out rounded-lg hover:bg-green-50 hover:text-green-600">
<div class="p-4 bg-indigo-200 rounded-xl">
<svg class="w-5 h-5 text-indigo-500 fill-current" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24">
<path d="M3 3H11V11H3V3ZM3 13H11V21H3V13ZM13 3H21V11H13V3ZM13 13H21V21H13V13Z"></path>
</svg>
</div>
<div>
Intregrations
<p class="text-xs font-normal text-gray-500">Real time notifications always keep you up to
date.</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="relative w-full">
<button
class="flex items-center w-full p-4 focus:outline-none hover:bg-gray-100 rounded-xl hover:text-gray-600 dropdown-toggle">
Benefits
<svg class="w-4 h-4 ml-2 stroke-current" fill="none" stroke="currentColor" stroke-width="1.5"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path>
</svg>
</button>
<div class="hidden w-full p-4 mt-2 bg-white rounded-lg dropdown">
<div class="relative z-10">
<a href="#"
class="block p-2 -mx-2 font-semibold text-gray-800 transition duration-300 ease-in-out rounded-lg hover:bg-gradient-to-br hover:from-indigo-50 hover:to-pink-50 hover:text-indigo-600">
Documentation
<p class="font-normal text-gray-500">Start integrating in no time</p>
</a>
<div class="grid grid-cols-1 gap-6 mt-6">
<div>
<p class="uppercase text-gray-500 font-medium text-[13px]">Main product</p>
<ul class="mt-3 text-[15px] space-y-4">
<li>
<a href="#"
class="flex items-center p-2 -mx-2 space-x-2 font-bold text-gray-800 transition duration-300 ease-in-out rounded-lg hover:bg-green-50 hover:text-green-600">
<div class="p-2 bg-red-200 rounded-xl">
<svg class="w-4 h-4 text-red-500 fill-current" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24">
<path
d="M20 17H22V19H2V17H4V10C4 5.58172 7.58172 2 12 2C16.4183 2 20 5.58172 20 10V17ZM9 21H15V23H9V21Z">
</path>
</svg>
</div>
<div>
Notifications
</div>
</a>
</li>
<li>
<a href="#"
class="flex items-center p-2 -mx-2 space-x-2 font-bold text-green-600 transition duration-300 ease-in-out rounded-lg bg-green-50">
<div class="p-2 bg-green-200 rounded-xl">
<svg class="w-4 h-4 text-green-500 fill-current" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24">
<path
d="M16 2L21 7V21.0082C21 21.556 20.5551 22 20.0066 22H3.9934C3.44476 22 3 21.5447 3 21.0082V2.9918C3 2.44405 3.44495 2 3.9934 2H16ZM11 7V17H13V7H11ZM15 11V17H17V11H15ZM7 13V17H9V13H7Z">
</path>
</svg>
</div>
<div>
Analytics
</div>
</a>
</li>
<li>
<a href="#"
class="flex items-center p-2 -mx-2 space-x-2 font-bold text-gray-800 transition duration-300 ease-in-out rounded-lg hover:bg-green-50 hover:text-green-600">
<div class="p-2 bg-indigo-200 rounded-xl">
<svg class="w-4 h-4 text-indigo-500 fill-current" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24">
<path d="M3 3H11V11H3V3ZM3 13H11V21H3V13ZM13 3H21V11H13V3ZM13 13H21V21H13V13Z"></path>
</svg>
</div>
<div>
Intregrations
date.</p>
</div>
</a>
</li>
</ul>
</div>
<div>
<p class="uppercase tracking-wider text-gray-500 font-medium text-[13px]">Second product</p>
<ul class="mt-3 text-[15px] space-y-4">
<li>
<a href="#"
class="flex items-center p-2 -mx-2 space-x-2 font-semibold text-gray-800 transition duration-300 ease-in-out rounded-lg hover:bg-gradient-to-br hover:bg-green-50 hover:text-green-600">
<div class="p-2 bg-pink-200 rounded-xl">
<svg class="w-4 h-4 text-pink-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 22H4C3.44772 22 3 21.5523 3 21V3C3 2.44772 3.44772 2 4 2H20C20.5523 2 21 2.44772 21 3V21C21 21.5523 20.5523 22 20 22ZM8 7V9H16V7H8ZM8 11V13H16V11H8ZM8 15V17H13V15H8Z"></path></svg>
</div>
<div>
Documentation
</div>
</a>
</li>
<li>
<a href="#"
class="flex items-center p-2 -mx-2 space-x-2 font-semibold text-gray-800 transition duration-300 ease-in-out rounded-lg hover:bg-gradient-to-br hover:bg-green-50 hover:text-green-600">
<div class="p-2 bg-yellow-200 rounded-xl">
<svg class="w-4 h-4 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 1L20.2169 2.82598C20.6745 2.92766 21 3.33347 21 3.80217V13.7889C21 15.795 19.9974 17.6684 18.3282 18.7812L12 23L5.6718 18.7812C4.00261 17.6684 3 15.795 3 13.7889V3.80217C3 3.33347 3.32553 2.92766 3.78307 2.82598L12 1ZM16.4524 8.22183L11.5019 13.1709L8.67421 10.3431L7.25999 11.7574L11.5026 16L17.8666 9.63604L16.4524 8.22183Z"></path></svg>
</div>
<div>
Security
</div>
</a>
</li>
<li>
<a href="#"
class="flex p-2 -mx-2 space-x-2 font-semibold text-gray-800 transition duration-300 ease-in-out rounded-lg hover:bg-gradient-to-br hover:bg-green-50 hover:text-green-600">
<div class="p-2 bg-purple-200 rounded-xl">
<svg class="w-4 h-4 text-purple-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 8C22.1046 8 23 8.89543 23 10V14C23 15.1046 22.1046 16 21 16H19.9381C19.446 19.9463 16.0796 23 12 23V21C15.3137 21 18 18.3137 18 15V9C18 5.68629 15.3137 3 12 3C8.68629 3 6 5.68629 6 9V16H3C1.89543 16 1 15.1046 1 14V10C1 8.89543 1.89543 8 3 8H4.06189C4.55399 4.05369 7.92038 1 12 1C16.0796 1 19.446 4.05369 19.9381 8H21ZM7.75944 15.7849L8.81958 14.0887C9.74161 14.6662 10.8318 15 12 15C13.1682 15 14.2584 14.6662 15.1804 14.0887L16.2406 15.7849C15.0112 16.5549 13.5576 17 12 17C10.4424 17 8.98882 16.5549 7.75944 15.7849Z"></path></svg>
</div>
<div>
Support
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="relative w-full">
<button
class="flex items-center w-full p-4 focus:outline-none hover:bg-gray-100 rounded-xl hover:text-gray-600 dropdown-toggle">
Supports
<svg class="w-4 h-4 ml-2 stroke-current" fill="none" stroke="currentColor" stroke-width="1.5"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path>
</svg>
</button>
<div class="hidden p-4 mt-2 bg-white rounded-lg dropdown w-80">
<div class="relative z-10">
<ul class="mt-3 text-[15px] space-y-4">
<li>
<a href="#"
class="flex items-center p-2 -mx-2 space-x-2 font-bold text-gray-800 transition duration-300 ease-in-out rounded-lg hover:bg-green-50 hover:text-green-600">
<div>
Notifications
</div>
</a>
</li>
<li>
<a href="#"
class="flex items-center p-2 -mx-2 space-x-2 font-bold text-green-600 transition duration-300 ease-in-out rounded-lg bg-green-50">
<div>
Analytics
</div>
</a>
</li>
<li>
<a href="#"
class="flex items-center p-2 -mx-2 space-x-2 font-bold text-gray-800 transition duration-300 ease-in-out rounded-lg hover:bg-green-50 hover:text-green-600">
<div>
Intregrations
</div>
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="relative w-full">
<button
class="flex items-center w-full p-4 focus:outline-none hover:bg-gray-100 rounded-xl hover:text-gray-600 dropdown-toggle">
Pricing
</button>
</li>
</ul>
</nav>
</div>
<script>
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
const dropdownToggles = document.querySelectorAll('.dropdown-toggle');
// hamburger menu
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// end hamburger menu
// dropdown mobile
dropdownToggles.forEach((toggle) => {
toggle.addEventListener('click', () => {
const dropdown = toggle.nextElementSibling;
const otherDropdowns = document.querySelectorAll('.dropdown');
otherDropdowns.forEach((d) => {
if (d !== dropdown) {
d.classList.add('hidden');
}
});
dropdown.classList.toggle('hidden');
toggle.querySelector('svg').classList.toggle('rotate-180');
});
});
window.addEventListener('click', (event) => {
if (!event.target.matches('.dropdown-toggle') && !event.target.closest('.dropdown')) {
dropdownToggles.forEach((toggle) => {
toggle.nextElementSibling.classList.add('hidden');
toggle.querySelector('svg').classList.remove('rotate-180');
});
}
});
</script>
</div>