Navbars
Simple Solid
<header>
<nav class="relative h-16 lg:h-24 mx-auto max-w-7xl flex justify-between items-center px-4 lg:px-8">
<div class="flex items-center">
<a href="#" role="link" class="h-12">
<span class="bg-black w-12 h-12 rounded-full inline-block"></span>
</a>
</div>
<div class="hidden lg:flex flex-1 items-center justify-center sm:absolute sm:inset-0">
<ul class="flex gap-x-10">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Features</a>
</li>
<li>
<a href="#">Blogs</a>
</li>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
</div>
<div class="hidden lg:flex justify-end space-x-4 ">
<a href="#" class="px-5 py-3 text-black">
Log in
</a>
<a href="#" class="bg-black px-5 py-3 text-white">
Register
</a>
</div>
<div class="lg:hidden">
<button type="button">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</button>
</div>
</nav>
<nav>
<div class="lg:hidden w-full bg-white px-4 py-5">
<ul class="flex flex-col space-y-6">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Features</a>
</li>
<li>
<a href="#">Blogs</a>
</li>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
</header>
<header x-data="{menu: false}">
<nav class="relative h-16 lg:h-24 mx-auto max-w-7xl flex justify-between items-center px-4 lg:px-8">
<div class="flex items-center">
<a href="#" role="link" class="h-12">
<span class="bg-black w-12 h-12 rounded-full inline-block"></span>
</a>
</div>
<div class="hidden lg:flex flex-1 items-center justify-center sm:absolute sm:inset-0">
<ul class="flex gap-x-10">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Features</a>
</li>
<li>
<a href="#">Blogs</a>
</li>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
</div>
<div class="hidden lg:flex justify-end space-x-4 ">
<a href="#" class="px-5 py-3 text-black">
Log in
</a>
<a href="#" class="bg-black px-5 py-3 text-white">
Register
</a>
</div>
<div class="lg:hidden">
<button type="button" @click="menu = !menu">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</button>
</div>
</nav>
<nav x-show="menu" x-transition x-cloak>
<div class="lg:hidden w-full bg-white px-4 py-5">
<ul class="flex flex-col space-y-6">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Features</a>
</li>
<li>
<a href="#">Blogs</a>
</li>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
</header>
import React, { useState } from 'react';
function Header() {
const [menu, setMenu] = useState(false);
const toggleMenu = () => {
setMenu(!menu);
};
return (
<header>
<nav className="relative h-16 lg:h-24 mx-auto max-w-7xl flex justify-between items-center px-4 lg:px-8">
<div className="flex items-center">
<a href="#" role="link" className="h-12">
<span className="bg-black w-12 h-12 rounded-full inline-block"></span>
</a>
</div>
<div className="hidden lg:flex flex-1 items-center justify-center sm:absolute sm:inset-0">
<ul className="flex gap-x-10">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Features</a>
</li>
<li>
<a href="#">Blogs</a>
</li>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
</div>
<div className="hidden lg:flex justify-end space-x-4 ">
<a href="#" className="px-5 py-3 text-black">
Log in
</a>
<a href="#" className="bg-black px-5 py-3 text-white">
Register
</a>
</div>
<div className="lg:hidden">
<button type="button" onClick={toggleMenu}>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
className="w-8 h-8"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
/>
</svg>
</button>
</div>
</nav>
<nav className={`lg:hidden w-full bg-white px-4 py-5 ${menu ? '' : 'hidden'}`}>
<ul className="flex flex-col space-y-6">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Features</a>
</li>
<li>
<a href="#">Blogs</a>
</li>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
</nav>
</header>
);
}
export default Header;
<template>
<header>
<nav class="relative h-16 lg:h-24 mx-auto max-w-7xl flex justify-between items-center px-4 lg:px-8">
<div class="flex items-center">
<a href="#" role="link" class="h-12">
<span class="bg-black w-12 h-12 rounded-full inline-block"></span>
</a>
</div>
<div v-show="!isMobile" class="hidden lg:flex flex-1 items-center justify-center sm:absolute sm:inset-0">
<ul class="flex gap-x-10">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Features</a>
</li>
<li>
<a href="#">Blogs</a>
</li>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
</div>
<div v-show="isMobile" class="hidden lg:flex justify-end space-x-4 ">
<a href="#" class="px-5 py-3 text-black">
Log in
</a>
<a href="#" class="bg-black px-5 py-3 text-white">
Register
</a>
</div>
<div class="lg:hidden">
<button type="button" @click="toggleMenu">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</button>
</div>
</nav>
<nav v-show="showMobileMenu" transition="slide">
<div class="lg:hidden w-full bg-white px-4 py-5">
<ul class="flex flex-col space-y-6">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Features</a>
</li>
<li>
<a href="#">Blogs</a>
</li>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
</header>
</template>
<script>
export default {
data() {
return {
isMobile: window.innerWidth < 992,
showMobileMenu: false,
};
},
methods: {
toggleMenu() {
this.showMobileMenu = !this.showMobileMenu;
},
},
watch: {
'$route': {
handler() {
this.showMobileMenu = false;
},
deep: true
}
}
};
</script>
Simple Nav With Icon Searchbar
<header>
{{--SEARCH BAR--}}
<nav>
<div class="w-full bg-white px-4 py-5 flex justify-center">
<form action="" class="w-full lg:w-auto border flex items-center">
<button type="submit" class="px-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 text-zinc-500">
<path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z" clip-rule="evenodd" />
</svg>
</button>
<input type="text" placeholder="Search" class="w-full border-0">
</form>
</div>
</nav>
<nav class="relative h-16 lg:h-24 mx-auto max-w-7xl flex justify-between items-center px-4 lg:px-8">
<div class="flex items-center space-x-10">
<a href="#" role="link" class="h-12">
<span class="bg-black w-12 h-12 rounded-full inline-block"></span>
</a>
<div class="hidden lg:flex flex-1">
<ul class="flex gap-x-10">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Features</a>
</li>
<li>
<a href="#">Blogs</a>
</li>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
</div>
</div>
<div class="flex justify-end space-x-4">
<button type="button">
<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">
<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
</svg>
</button>
<button type="button" class="lg:hidden">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</button>
</div>
</nav>
{{--MOBILE MENU--}}
<nav>
<div class="lg:hidden w-full bg-white px-4 py-5">
<ul class="flex flex-col space-y-6">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Features</a>
</li>
<li>
<a href="#">Blogs</a>
</li>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
</header>
<header x-data="{menu: false, search: false}">
{{--SEARCH BAR--}}
<nav x-show="search" x-cloak>
<div class="w-full bg-white px-4 py-5 flex justify-center">
<form action="" class="w-full lg:w-auto border flex items-center">
<button type="submit" class="px-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 text-zinc-500">
<path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z" clip-rule="evenodd" />
</svg>
</button>
<input type="text" placeholder="Search" class="w-full border-0">
</form>
</div>
</nav>
<nav class="relative h-16 lg:h-24 mx-auto max-w-7xl flex justify-between items-center px-4 lg:px-8">
<div class="flex items-center space-x-10">
<a href="#" role="link" class="h-12">
<span class="bg-black w-12 h-12 rounded-full inline-block"></span>
</a>
<div class="hidden lg:flex flex-1">
<ul class="flex gap-x-10">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Features</a>
</li>
<li>
<a href="#">Blogs</a>
</li>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
</div>
</div>
<div class="flex justify-end space-x-4">
<button type="button" @click="search = !search">
<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">
<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
</svg>
</button>
<button type="button" class="lg:hidden" @click="menu = !menu">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</button>
</div>
</nav>
{{--MOBILE MENU--}}
<nav x-show="menu" x-cloak>
<div class="lg:hidden w-full bg-white px-4 py-5">
<ul class="flex flex-col space-y-6">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Features</a>
</li>
<li>
<a href="#">Blogs</a>
</li>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
</header>
Simple Nav With Searchbar
<header>
<nav class="relative h-16 lg:h-24 mx-auto max-w-7xl flex justify-between items-center px-4 lg:px-8">
<div class="flex items-center space-x-10">
<a href="#" role="link" class="h-12">
<span class="bg-black w-12 h-12 rounded-full inline-block"></span>
</a>
<div class="hidden lg:flex flex-1">
<ul class="flex gap-x-10">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Features</a>
</li>
<li>
<a href="#">Blogs</a>
</li>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
</div>
</div>
<div class="flex justify-end space-x-4">
<form action="" class="w-full lg:w-auto border flex items-center rounded-lg overflow-hidden shadow">
<button type="submit" class="pl-3 pr-2 bg-white h-full">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 text-zinc-500">
<path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z" clip-rule="evenodd" />
</svg>
</button>
<input type="text" placeholder="Search" class="w-full border-0 focus:ring-0 focus:outline-none">
</form>
<button type="button" class="lg:hidden">
<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">
<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
</svg>
</button>
<button type="button" class="lg:hidden">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</button>
</div>
</nav>
{{--MOBILE MENU--}}
<nav>
<div class="lg:hidden w-full bg-white px-4 py-5">
<ul class="flex flex-col space-y-6">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Features</a>
</li>
<li>
<a href="#">Blogs</a>
</li>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
</header>
<header x-data="{menu: false}">
<nav class="relative h-16 lg:h-24 mx-auto max-w-7xl flex justify-between items-center px-4 lg:px-8">
<div class="flex items-center space-x-10">
<a href="#" role="link" class="h-12">
<span class="bg-black w-12 h-12 rounded-full inline-block"></span>
</a>
<div class="hidden lg:flex flex-1">
<ul class="flex gap-x-10">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Features</a>
</li>
<li>
<a href="#">Blogs</a>
</li>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
</div>
</div>
<div class="flex justify-end space-x-4">
<form action="" class="w-full lg:w-auto border flex items-center rounded-lg overflow-hidden shadow">
<button type="submit" class="pl-3 pr-2 bg-white h-full">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 text-zinc-500">
<path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z" clip-rule="evenodd" />
</svg>
</button>
<input type="text" placeholder="Search" class="w-full border-0 focus:ring-0 focus:outline-none">
</form>
<button type="button" class="lg:hidden" @click="menu = !menu">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</button>
</div>
</nav>
{{--MOBILE MENU--}}
<nav x-show="menu" x-cloak x-transition>
<div class="lg:hidden w-full bg-white px-4 py-5">
<ul class="flex flex-col space-y-6">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Features</a>
</li>
<li>
<a href="#">Blogs</a>
</li>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
</header>
Simple Nav Search Menu
<header>
<nav class="relative h-16 lg:h-24 mx-auto max-w-7xl flex justify-between items-center px-4 lg:px-8">
<div class="flex items-center space-x-6">
<a href="#" role="link" class="h-12">
<span class="bg-black w-12 h-12 rounded-full inline-block"></span>
</a>
<form action="" class="h-10 w-full lg:w-auto border flex items-center rounded-lg overflow-hidden shadow">
<button type="submit" class="pl-3 pr-2 bg-white h-10">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 text-zinc-500">
<path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z" clip-rule="evenodd" />
</svg>
</button>
<input type="text" placeholder="Search" class="h-10 w-full border-0 focus:ring-0 focus:outline-none">
</form>
</div>
<div class="flex justify-end space-x-4">
<div class="hidden lg:flex flex-1">
<ul class="flex gap-x-10">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Features</a>
</li>
<li>
<a href="#">Blogs</a>
</li>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
</div>
<button type="button" class="lg:hidden">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</button>
</div>
</nav>
{{--MOBILE MENU--}}
<nav>
<div class="lg:hidden w-full bg-white px-4 py-5">
<ul class="flex flex-col space-y-6">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Features</a>
</li>
<li>
<a href="#">Blogs</a>
</li>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
</header>
<header x-data="{menu: false}">
<nav class="relative h-16 lg:h-24 mx-auto max-w-7xl flex justify-between items-center px-4 lg:px-8">
<div class="flex items-center space-x-6">
<a href="#" role="link" class="h-12">
<span class="bg-black w-12 h-12 rounded-full inline-block"></span>
</a>
<form action="" class="h-10 w-full lg:w-auto border flex items-center rounded-lg overflow-hidden shadow">
<button type="submit" class="pl-3 pr-2 bg-white h-10">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 text-zinc-500">
<path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z" clip-rule="evenodd" />
</svg>
</button>
<input type="text" placeholder="Search" class="h-10 w-full border-0 focus:ring-0 focus:outline-none">
</form>
</div>
<div class="flex justify-end space-x-4">
<div class="hidden lg:flex flex-1">
<ul class="flex gap-x-10">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Features</a>
</li>
<li>
<a href="#">Blogs</a>
</li>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
</div>
<button type="button" class="lg:hidden" @click="menu = !menu">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</button>
</div>
</nav>
{{--MOBILE MENU--}}
<nav x-show="menu" x-transition x-cloak>
<div class="lg:hidden w-full bg-white px-4 py-5">
<ul class="flex flex-col space-y-6">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Features</a>
</li>
<li>
<a href="#">Blogs</a>
</li>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
</header>
Simple Nav Brand
<header>
<nav class="relative h-16 lg:h-24 mx-auto max-w-7xl flex justify-center items-center px-4 lg:px-8">
<a href="#" role="link" class="h-12">
<span class="bg-gradient-to-br from-black to-indigo-500 w-12 h-12 rounded-full inline-block"></span>
</a>
</nav>
</header>
Simple Nav Menu Brand Join
<header>
<nav class="relative h-16 lg:h-24 mx-auto max-w-7xl flex justify-between items-center px-4 lg:px-8">
<div class="hidden lg:flex items-center">
<ul class="flex gap-x-10">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Features</a>
</li>
<li>
<a href="#">Blogs</a>
</li>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
</div>
<div class="flex flex-1 items-center justify-start lg:justify-center lg:absolute lg:inset-0">
<a href="#" role="link" class="h-12">
<span class="bg-gradient-to-br from-black to-indigo-500 w-12 h-12 rounded-full inline-block"></span>
</a>
</div>
<div class="flex justify-end space-x-4 mr-4">
<a href="#" class="px-4 py-2 text-black flex items-center shadow rounded-lg bg-white">
Join
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 ml-2">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
</svg>
</a>
</div>
<div class="flex lg:hidden items-center">
<button type="button">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</button>
</div>
</nav>
<nav>
<div class="lg:hidden w-full bg-white px-4 py-5">
<ul class="flex flex-col space-y-6">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Features</a>
</li>
<li>
<a href="#">Blogs</a>
</li>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
</header>
<header x-data="{menu: false}">
<nav class="relative h-16 lg:h-24 mx-auto max-w-7xl flex justify-between items-center px-4 lg:px-8">
<div class="hidden lg:flex items-center">
<ul class="flex gap-x-10">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Features</a>
</li>
<li>
<a href="#">Blogs</a>
</li>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
</div>
<div class="flex flex-1 items-center justify-start lg:justify-center lg:absolute lg:inset-0">
<a href="#" role="link" class="h-12">
<span class="bg-gradient-to-br from-black to-indigo-500 w-12 h-12 rounded-full inline-block"></span>
</a>
</div>
<div class="flex justify-end space-x-4 mr-4">
<a href="#" class="px-4 py-2 text-black flex items-center shadow rounded-lg bg-white">
Join
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 ml-2">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
</svg>
</a>
</div>
<div class="flex lg:hidden items-center">
<button type="button" @click="menu = !menu">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</button>
</div>
</nav>
<nav x-show="menu" x-cloak x-transition>
<div class="lg:hidden w-full bg-white px-4 py-5">
<ul class="flex flex-col space-y-6">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Features</a>
</li>
<li>
<a href="#">Blogs</a>
</li>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
</header>
<template>
<header>
<nav class="relative h-16 lg:h-24 mx-auto max-w-7xl flex justify-between items-center px-4 lg:px-8">
<div class="hidden lg:flex items-center">
<ul class="flex gap-x-10">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Features</a>
</li>
<li>
<a href="#">Blogs</a>
</li>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
</div>
<div class="flex flex-1 items-center justify-start lg:justify-center lg:absolute lg:inset-0">
<a href="#" role="link" class="h-12">
<span class="bg-gradient-to-br from-black to-indigo-500 w-12 h-12 rounded-full inline-block"></span>
</a>
</div>
<div class="flex justify-end space-x-4 mr-4">
<a href="#" class="px-4 py-2 text-black flex items-center shadow rounded-lg bg-white">
Join
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 ml-2">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
</svg>
</a>
</div>
<div class="flex lg:hidden items-center">
<button type="button" @click="toggleMenu">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</button>
</div>
</nav>
<nav v-show="showMobileMenu" transition="slide">
<div class="lg:hidden w-full bg-white px-4 py-5">
<ul class="flex flex-col space-y-6">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Features</a>
</li>
<li>
<a href="#">Blogs</a>
</li>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
</header>
</template>
<script>
export default {
data() {
return {
showMobileMenu: false,
};
},
methods: {
toggleMenu() {
this.showMobileMenu = !this.showMobileMenu;
},
},
};
</script>
import React, { useState } from 'react';
const Header = () => {
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
const toggleMobileMenu = () => {
setIsMobileMenuOpen(!isMobileMenuOpen);
};
return (
<header>
<nav className="relative h-16 lg:h-24 mx-auto max-w-7xl flex justify-between items-center px-4 lg:px-8">
<div className="hidden lg:flex items-center">
<ul className="flex gap-x-10">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Features</a>
</li>
<li>
<a href="#">Blogs</a>
</li>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
</div>
<div className="flex flex-1 items-center justify-start lg:justify-center lg:absolute lg:inset-0">
<a href="#" role="link" className="h-12">
<span className="bg-gradient-to-br from-black to-indigo-500 w-12 h-12 rounded-full inline-block"></span>
</a>
</div>
<div className="flex justify-end space-x-4 mr-4">
<a href="#" className="px-4 py-2 text-black flex items-center shadow rounded-lg bg-white">
Join
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
className="w-4 h-4 ml-2"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
</svg>
</a>
</div>
<div className="flex lg:hidden items-center">
<button type="button" onClick={toggleMobileMenu}>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
className="w-8 h-8"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</button>
</div>
</nav>
<nav className={`lg:hidden w-full bg-white px-4 py-5 ${isMobileMenuOpen ? '' : 'hidden'}`}>
<ul className="flex flex-col space-y-6">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Features</a>
</li>
<li>
<a href="#">Blogs</a>
</li>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
</nav>
</header>
);
};
export default Header;