Navbars
Simple with CTA
Require JS<nav x-data="{ show: false }" class="flex justify-between items-center p-5">
<div class="logo flex items-center space-x-3 text-purple-800">
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5" />
</svg>
<span class="font-bold text-2xl">Tesla</span>
</div>
<ul class="hidden md:flex space-x-10">
<li>
<a class="border-b border-gray-800 border-opacity-0 hover:border-opacity-100" href="#">Dashboard</a>
</li>
<li>
<a class="border-b border-gray-800 border-opacity-0 hover:border-opacity-100" href="#">Team</a>
</li>
<li>
<a class="border-b border-gray-800 border-opacity-0 hover:border-opacity-100" href="#">Projects</a>
</li>
<li>
<a class="border-b border-gray-800 border-opacity-0 hover:border-opacity-100" href="#">Calendar</a>
</li>
<li>
<a class="bg-purple-800 hover:bg-purple-900 text-white px-4 py-2 rounded-md" href="#">Get Started</a>
</li>
</ul>
<!-- Mobile Navigation - START -->
<div x-on:click="show = !show" class="block md:hidden">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</div>
<ul x-show="show"
class="absolute top-0 left-0 w-full bg-gray-100 min-h-full bg-opacity-90 flex flex-col justify-center space-y-10 text-center">
<li>
<a class="border-b border-gray-800 border-opacity-0 hover:border-opacity-100" href="#">Dashboard</a>
</li>
<li>
<a class="border-b border-gray-800 border-opacity-0 hover:border-opacity-100" href="#">Team</a>
</li>
<li>
<a class="border-b border-gray-800 border-opacity-0 hover:border-opacity-100" href="#">Projects</a>
</li>
<li>
<a class="border-b border-gray-800 border-opacity-0 hover:border-opacity-100" href="#">Calendar</a>
</li>
<li>
<a class="bg-purple-800 hover:bg-purple-900 text-white px-4 py-2 rounded-md" href="#">Get
Started</a>
</li>
<li x-on:click="show = !show" class="pt-10">
<button class="bg-black text-white px-4 py-2 rounded-md text-xs">Close</button>
</li>
</ul>
<!-- Mobile Navigation - END -->
</nav>Simple Dark with CTA
Require JS<nav x-data="{ show: false }" class="flex bg-gray-900 text-white justify-between items-center p-5">
<div class="logo flex items-center space-x-3 text-purple-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5" />
</svg>
<span class="font-bold text-2xl">Tesla</span>
</div>
<ul class="hidden md:flex space-x-10">
<li>
<a class="border-b border-gray-200 border-opacity-0 hover:border-opacity-100" href="#">Dashboard</a>
</li>
<li>
<a class="border-b border-gray-200 border-opacity-0 hover:border-opacity-100" href="#">Team</a>
</li>
<li>
<a class="border-b border-gray-200 border-opacity-0 hover:border-opacity-100" href="#">Projects</a>
</li>
<li>
<a class="border-b border-gray-200 border-opacity-0 hover:border-opacity-100" href="#">Calendar</a>
</li>
<li>
<a class="bg-purple-800 hover:bg-purple-600 text-white px-4 py-2 rounded-md" href="#">Get Started</a>
</li>
</ul>
<!-- Mobile Navigation - START -->
<div x-on:click="show = !show" class="block md:hidden">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</div>
<ul x-show="show"
class="absolute top-0 left-0 w-full bg-gray-900 min-h-full bg-opacity-90 flex flex-col justify-center space-y-10 text-center">
<li>
<a class="border-b border-gray-800 border-opacity-0 hover:border-opacity-100" href="#">Dashboard</a>
</li>
<li>
<a class="border-b border-gray-800 border-opacity-0 hover:border-opacity-100" href="#">Team</a>
</li>
<li>
<a class="border-b border-gray-800 border-opacity-0 hover:border-opacity-100" href="#">Projects</a>
</li>
<li>
<a class="border-b border-gray-800 border-opacity-0 hover:border-opacity-100" href="#">Calendar</a>
</li>
<li>
<a class="bg-purple-800 hover:bg-purple-600 text-white px-4 py-2 rounded-md" href="#">Get Started</a>
</li>
<li x-on:click="show = !show" class="pt-10">
<button class="bg-black text-white px-4 py-2 rounded-md text-xs">Close</button>
</li>
</ul>
<!-- Mobile Navigation - END -->
</nav>Menu Center with CTA
Require JS<nav x-data="{ show: false }" class="flex justify-between items-center p-5">
<div class="logo flex items-center space-x-3 text-purple-800">
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5" />
</svg>
<span class="font-bold text-2xl">Tesla</span>
</div>
<ul class="hidden md:flex space-x-10">
<li>
<a class="border-b border-gray-800 border-opacity-0 hover:border-opacity-100" href="#">Dashboard</a>
</li>
<li>
<a class="border-b border-gray-800 border-opacity-0 hover:border-opacity-100" href="#">Team</a>
</li>
<li>
<a class="border-b border-gray-800 border-opacity-0 hover:border-opacity-100" href="#">Projects</a>
</li>
<li>
<a class="border-b border-gray-800 border-opacity-0 hover:border-opacity-100" href="#">Calendar</a>
</li>
</ul>
<a class="hidden md:flex bg-purple-800 hover:bg-purple-900 text-white px-4 py-2 rounded-md" href="#">Get Started</a>
<!-- Mobile Navigation - START -->
<div x-on:click="show = !show" class="block md:hidden">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</div>
<ul x-show="show"
class="absolute top-0 left-0 w-full bg-gray-100 min-h-full bg-opacity-90 flex flex-col justify-center space-y-10 text-center">
<li>
<a class="border-b border-gray-800 border-opacity-0 hover:border-opacity-100" href="#">Dashboard</a>
</li>
<li>
<a class="border-b border-gray-800 border-opacity-0 hover:border-opacity-100" href="#">Team</a>
</li>
<li>
<a class="border-b border-gray-800 border-opacity-0 hover:border-opacity-100" href="#">Projects</a>
</li>
<li>
<a class="border-b border-gray-800 border-opacity-0 hover:border-opacity-100" href="#">Calendar</a>
</li>
<li>
<a class="bg-purple-800 hover:bg-purple-900 text-white px-4 py-2 rounded-md" href="#">Get Started</a>
</li>
<li x-on:click="show = !show" class="pt-10">
<button class="bg-black text-white px-4 py-2 rounded-md text-xs">Close</button>
</li>
</ul>
<!-- Mobile Navigation - END -->
</nav>Menu Center Dark with CTA
Require JS<nav x-data="{ show: false }" class="flex bg-gray-900 text-white justify-between items-center p-5">
<div class="logo flex items-center space-x-3 text-purple-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5" />
</svg>
<span class="font-bold text-2xl">Tesla</span>
</div>
<ul class="hidden md:flex space-x-10">
<li>
<a class="border-b border-gray-200 border-opacity-0 hover:border-opacity-100" href="#">Dashboard</a>
</li>
<li>
<a class="border-b border-gray-200 border-opacity-0 hover:border-opacity-100" href="#">Team</a>
</li>
<li>
<a class="border-b border-gray-200 border-opacity-0 hover:border-opacity-100" href="#">Projects</a>
</li>
<li>
<a class="border-b border-gray-200 border-opacity-0 hover:border-opacity-100" href="#">Calendar</a>
</li>
</ul>
<a class="hidden md:flex bg-purple-800 hover:bg-purple-900 text-white px-4 py-2 rounded-md" href="#">Get Started</a>
<!-- Mobile Navigation - START -->
<div x-on:click="show = !show" class="block md:hidden">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</div>
<ul x-show="show"
class="absolute top-0 left-0 w-full bg-gray-800 min-h-full bg-opacity-90 flex flex-col justify-center space-y-10 text-center">
<li>
<a class="border-b border-gray-200 border-opacity-0 hover:border-opacity-100" href="#">Dashboard</a>
</li>
<li>
<a class="border-b border-gray-200 border-opacity-0 hover:border-opacity-100" href="#">Team</a>
</li>
<li>
<a class="border-b border-gray-200 border-opacity-0 hover:border-opacity-100" href="#">Projects</a>
</li>
<li>
<a class="border-b border-gray-200 border-opacity-0 hover:border-opacity-100" href="#">Calendar</a>
</li>
<li>
<a class="bg-purple-800 hover:bg-purple-900 text-white px-4 py-2 rounded-md" href="#">Get Started</a>
</li>
<li x-on:click="show = !show" class="pt-10">
<button class="bg-black text-white px-4 py-2 rounded-md text-xs">Close</button>
</li>
</ul>
<!-- Mobile Navigation - END -->
</nav>Logo Center with CTA
Require JS<nav x-data="{ show: false }" class="flex justify-between items-center p-5">
<div class="logo flex justify-center items-center space-x-3 text-purple-800 order-2 w-full md:w-1/5">
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5" />
</svg>
<span class="font-bold text-2xl">Tesla</span>
</div>
<ul class="hidden md:flex space-x-10 order-1 w-2/5">
<li>
<a class="border-b border-gray-800 border-opacity-0 hover:border-opacity-100" href="#">Dashboard</a>
</li>
<li>
<a class="border-b border-gray-800 border-opacity-0 hover:border-opacity-100" href="#">Team</a>
</li>
<li>
<a class="border-b border-gray-800 border-opacity-0 hover:border-opacity-100" href="#">Projects</a>
</li>
<li>
<a class="border-b border-gray-800 border-opacity-0 hover:border-opacity-100" href="#">Calendar</a>
</li>
</ul>
<div class="hidden md:flex order-3 w-2/5 justify-end">
<a class="bg-purple-800 hover:bg-purple-900 text-white px-4 py-2 rounded-md" href="#">Get Started</a>
</div>
<!-- Mobile Navigation - START -->
<div x-on:click="show = !show" class="block md:hidden order-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</div>
<ul x-show="show"
class="absolute top-0 left-0 w-full bg-gray-100 min-h-full bg-opacity-90 flex flex-col justify-center space-y-10 text-center">
<li>
<a class="border-b border-gray-800 border-opacity-0 hover:border-opacity-100" href="#">Dashboard</a>
</li>
<li>
<a class="border-b border-gray-800 border-opacity-0 hover:border-opacity-100" href="#">Team</a>
</li>
<li>
<a class="border-b border-gray-800 border-opacity-0 hover:border-opacity-100" href="#">Projects</a>
</li>
<li>
<a class="border-b border-gray-800 border-opacity-0 hover:border-opacity-100" href="#">Calendar</a>
</li>
<li>
<a class="bg-purple-800 hover:bg-purple-900 text-white px-4 py-2 rounded-md" href="#">Get Started</a>
</li>
<li x-on:click="show = !show" class="pt-10">
<button class="bg-black text-white px-4 py-2 rounded-md text-xs">Close</button>
</li>
</ul>
<!-- Mobile Navigation - END -->
</nav>Logo Center Dark with CTA
Require JS<nav x-data="{ show: false }" class="flex justify-between items-center bg-gray-900 text-white p-5">
<div class="logo flex justify-center items-center space-x-3 text-purple-400 order-2 w-full md:w-1/5">
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5" />
</svg>
<span class="font-bold text-2xl">Tesla</span>
</div>
<ul class="hidden md:flex space-x-10 order-1 w-2/5">
<li>
<a class="border-b border-gray-200 border-opacity-0 hover:border-opacity-100" href="#">Dashboard</a>
</li>
<li>
<a class="border-b border-gray-200 border-opacity-0 hover:border-opacity-100" href="#">Team</a>
</li>
<li>
<a class="border-b border-gray-200 border-opacity-0 hover:border-opacity-100" href="#">Projects</a>
</li>
<li>
<a class="border-b border-gray-200 border-opacity-0 hover:border-opacity-100" href="#">Calendar</a>
</li>
</ul>
<div class="hidden md:flex order-3 w-2/5 justify-end">
<a class="bg-purple-800 hover:bg-purple-900 text-white px-4 py-2 rounded-md" href="#">Get Started</a>
</div>
<!-- Mobile Navigation - START -->
<div x-on:click="show = !show" class="block md:hidden order-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</div>
<ul x-show="show"
class="absolute top-0 left-0 w-full bg-gray-800 min-h-full bg-opacity-90 flex flex-col justify-center space-y-10 text-center">
<li>
<a class="border-b border-gray-200 border-opacity-0 hover:border-opacity-100" href="#">Dashboard</a>
</li>
<li>
<a class="border-b border-gray-200 border-opacity-0 hover:border-opacity-100" href="#">Team</a>
</li>
<li>
<a class="border-b border-gray-200 border-opacity-0 hover:border-opacity-100" href="#">Projects</a>
</li>
<li>
<a class="border-b border-gray-200 border-opacity-0 hover:border-opacity-100" href="#">Calendar</a>
</li>
<li>
<a class="bg-purple-800 hover:bg-purple-900 text-white px-4 py-2 rounded-md" href="#">Get Started</a>
</li>
<li x-on:click="show = !show" class="pt-10">
<button class="bg-black text-white px-4 py-2 rounded-md text-xs">Close</button>
</li>
</ul>
<!-- Mobile Navigation - END -->
</nav>