Guess, IRL where no navbars in website which has 20 pages. This would rather increase the memory power in memorizing all the URLs 🤪
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<nav
class="p-5 bg-gray-600 shadow md:flex md:items-center md:justify-between"
>
<div class="flex justify-between items-center">
<span class="text-2xl font-[Poppins] cursor-pointer">
<img
class="inline h-10 w-20"
src="https://source.unsplash.com/random"
onclick="send()"
/>
</span>
<span class="text-3xl cursor-pointer mx-2 md:hidden block">
<div name="menu" class="open text-white" onclick="Menu(this)">
<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="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
/>
</svg>
</div>
</span>
</div>
<ul
class="md:flex md:items-center z-[-1] md:z-auto md:static absolute text-white bg-gray-600 w-full left-0 md:w-auto md:py-0 py-4 md:pl-0 pl-7 md:opacity-100 opacity-0 top-[-400px] transition-all ease-in duration-500"
>
<li class="mx-4 my-6 md:my-0">
<a href="#" class="text-xl hover:text-cyan-500 duration-500">HOME</a>
</li>
<li class="mx-4 my-6 md:my-0">
<a href="#" class="text-xl hover:text-cyan-500 duration-500">ABOUT</a>
</li>
<li class="mx-4 my-6 md:my-0">
<a href="#" class="text-xl hover:text-cyan-500 duration-500"
>SERVICES</a
>
</li>
<li class="mx-4 my-6 md:my-0">
<a href="#" class="text-xl hover:text-cyan-500 duration-500"
>CONTACT</a
>
</li>
<h2 class=""></h2>
</ul>
</nav>
<script>
function send() {
window.location.href = "https://github.com/uttampandit";
}
function Menu(e) {
let list = document.querySelector("ul");
e.name === "menu"
? ((e.name = "close"),
list.classList.add("top-[80px]"),
list.classList.add("opacity-100"))
: ((e.name = "menu"),
list.classList.remove("top-[80px]"),
list.classList.remove("opacity-100"));
}
</script>
</body>
</html><div class="bg-gray-50">
<nav class="relative my-3 mb-3 flex flex-wrap items-center justify-between bg-indigo-500 px-2 pt-1">
<div class="container mx-auto flex flex-wrap items-center justify-between">
<div class="static block w-auto justify-start">
<a class="mr-4 inline-block whitespace-nowrap text-sm font-bold uppercase leading-relaxed text-white" href="#pablo"> Navbar </a>
</div>
<div class="flex items-center" id="example-navbar-warning">
<ul class="ml-auto flex list-none flex-row">
<li class="nav-item rounded-t-xl hover:bg-white">
<a class="flex items-center px-3 py-2 text-xs font-bold leading-snug text-white hover:text-indigo-500" href="#pablo">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-layout-dashboard mr-1" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M4 4h6v8h-6z" />
<path d="M4 16h6v4h-6z" />
<path d="M14 12h6v8h-6z" />
<path d="M14 4h6v4h-6z" />
</svg>
Dashbord
</a>
</li>
<li class="nav-item rounded-t-xl hover:bg-white">
<a class="flex items-center px-3 py-2 text-xs font-bold leading-snug text-white hover:text-indigo-500" href="#pablo">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-rolodex mr-1" viewBox="0 0 16 16">
<path d="M8 9.05a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z" />
<path d="M1 1a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h.5a.5.5 0 0 0 .5-.5.5.5 0 0 1 1 0 .5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5.5.5 0 0 1 1 0 .5.5 0 0 0 .5.5h.5a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H6.707L6 1.293A1 1 0 0 0 5.293 1H1Zm0 1h4.293L6 2.707A1 1 0 0 0 6.707 3H15v10h-.085a1.5 1.5 0 0 0-2.4-.63C11.885 11.223 10.554 10 8 10c-2.555 0-3.886 1.224-4.514 2.37a1.5 1.5 0 0 0-2.4.63H1V2Z" />
</svg>
Address
</a>
</li>
<li class="nav-item rounded-t-xl hover:bg-white">
<a class="flex items-center px-3 py-2 text-xs font-bold leading-snug text-white hover:text-indigo-500" href="#pablo">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-break mr-1" viewBox="0 0 16 16">
<path d="M14 4.5V9h-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v7H2V2a2 2 0 0 1 2-2h5.5L14 4.5zM13 12h1v2a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-2h1v2a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-2zM.5 10a.5.5 0 0 0 0 1h15a.5.5 0 0 0 0-1H.5z" />
</svg>
Components
</a>
</li>
<li class="nav-item rounded-t-xl hover:bg-white">
<a class="flex items-center px-3 py-2 text-xs font-bold leading-snug text-white hover:text-indigo-500" href="#pablo">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar2-week mr-1" viewBox="0 0 16 16">
<path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM2 2a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H2z" />
<path d="M2.5 4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5V4zM11 7.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-5 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z" />
</svg>
Calender
</a>
</li>
<li class="nav-item rounded-t-xl hover:bg-white">
<a class="flex items-center px-3 py-2 text-xs font-bold leading-snug text-white hover:text-indigo-500" href="#pablo">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-bar-graph-fill mr-1" viewBox="0 0 16 16">
<path d="M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0zM9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1zm.5 10v-6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm-2.5.5a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-1zm-3 0a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-1z" />
</svg>
Charts
</a>
</li>
</ul>
</div>
</div>
</nav><nav class="my-3 rounded border-gray-200 bg-white px-2 py-2.5 dark:bg-gray-900 sm:px-4">
<div class="container mx-auto flex flex-wrap items-center justify-between">
<a href="#" class="flex items-center">
<span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Navbar</span>
</a>
<div class="flex md:order-2">
<button type="button" data-collapse-toggle="navbar-search" aria-controls="navbar-search" aria-expanded="false" class="mr-1 rounded-lg p-2.5 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-700 md:hidden">
<svg class="h-5 w-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
<span class="sr-only">Search</span>
</button>
<div class="relative hidden md:block">
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
<svg class="h-5 w-5 text-gray-500" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
<span class="sr-only">Search icon</span>
</div>
<input type="text" id="search-navbar" class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2 pl-10 text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500 sm:text-sm" placeholder="Search..." />
</div>
<button data-collapse-toggle="navbar-search" type="button" class="inline-flex items-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600 md:hidden" aria-controls="navbar-search" aria-expanded="false">
<span class="sr-only">Open menu</span>
<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
</button>
</div>
<div class="hidden w-full items-center justify-between md:order-1 md:flex md:w-auto" id="navbar-search">
<div class="relative mt-3 md:hidden">
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
<svg class="h-5 w-5 text-gray-500" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
</div>
<input type="text" id="search-navbar" class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2 pl-10 text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500 sm:text-sm" placeholder="Search..." />
</div>
<ul class="mt-4 flex flex-col rounded-lg border border-gray-100 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-800 md:mt-0 md:flex-row md:space-x-8 md:border-0 md:bg-white md:text-sm md:font-medium md:dark:bg-gray-900">
<li>
<a href="#" class="flex rounded bg-blue-700 py-2 pr-4 pl-3 text-white dark:text-white md:bg-transparent md:p-0 md:text-blue-700" aria-current="page">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house-fill mr-2" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6zm5-.793V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z" />
<path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z" />
</svg>
Home</a
>
</li>
<li>
<a href="#" class="flex rounded py-2 pr-4 pl-3 text-gray-700 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white md:p-0 md:hover:bg-transparent md:hover:text-blue-700 md:dark:hover:bg-transparent md:dark:hover:text-white">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-person-fill mr-2" viewBox="0 0 16 16">
<path d="M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0zM9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0zm2 5.755V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-.245S4 12 8 12s5 1.755 5 1.755z" />
</svg>
About</a
>
</li>
<li>
<a href="#" class="flex rounded py-2 pr-4 pl-3 text-gray-700 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white md:p-0 md:hover:bg-transparent md:hover:text-blue-700 md:dark:hover:bg-transparent md:dark:hover:text-white">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-diff-fill mr-2" viewBox="0 0 16 16">
<path d="M12 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM8.5 4.5V6H10a.5.5 0 0 1 0 1H8.5v1.5a.5.5 0 0 1-1 0V7H6a.5.5 0 0 1 0-1h1.5V4.5a.5.5 0 0 1 1 0zM6 10h4a.5.5 0 0 1 0 1H6a.5.5 0 0 1 0-1z" />
</svg>
Services</a
>
</li>
</ul>
</div>
</div>
</nav>
<div class="w-[360px]">
<img src="https://media.istockphoto.com/photos/sonoran-sunset-picture-id1296913338?k=20&m=1296913338&s=612x612&w=0&h=6U0r8rlHTVnOrY3WbJabcm-PWR6ekJif8WMU78giotE=" class="z-0 h-screen w-full" alt="" />
<h3 class="absolute top-10 left-5 z-0 text-2xl font-bold text-white">Brand</h3>
<nav class="absolute top-0 left-32 z-10 h-full w-[360px] bg-white py-5">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="absolute right-0 h-6 w-6 rotate-45">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
<ul class="my-10 mx-8 flex flex-col gap-7 text-xl font-light tracking-wide text-gray-600">
<li class="font-bold hover:text-blue-700">Home </li>
<li class="font-bold hover:text-blue-700">Product </li>
<li class="font-bold hover:text-blue-700">Shop </li>
<li class="font-bold hover:text-blue-700">Pricing </li>
<li class="font-bold hover:text-blue-700">Contact </li>
<li>
<button id="dropdownDefault" data-dropdown-toggle="dropdown" class="inline-flex items-center text-center font-bold text-gray-600 hover:text-blue-700" type="button">
Dropdown button <svg class="ml-2 h-4 w-4" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
</button>
<!-- Dropdown menu -->
<div id="dropdown" class="z-10 hidden w-44 divide-y divide-gray-100 rounded bg-white shadow dark:bg-gray-700">
<ul class="py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefault">
<li>
<a href="#" class="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Dashboard</a>
</li>
<li>
<a href="#" class="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Settings</a>
</li>
<li>
<a href="#" class="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Earnings</a>
</li>
<li>
<a href="#" class="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Sign out</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
<nav class="min-h-screen h-max bg-blue-500 opacity-80 text-white divide-y divide-blue-400">
<div class="px-5 py-3 w-full flex justify-between items-center">
<div class="">
<span class="">Homepage</span>
</div>
<button class="border-solid border-2 rounded py-1 px-2">
<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="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</button>
</div>
<div class="px-5 py-3 h-full divide-y divide-blue-400">
<ul class="w-full pb-3">
<li class="py-2 px-2 hover:bg-blue-600"><a href="#" class="">Menu Item 1</a></li>
<li class="w-full py-2 divide-x divide-blue-300">
<a href="#" class="flex p-2 hover:bg-blue-600">Menu Item 2</a>
<ul class="ml-2">
<li class="mt-2 ml-2.5 pl-5 py-2 hover:bg-blue-600 hover:list-disc"><a href="#" class="">Sub-menu Item 1</a></li>
<li class="pl-5 ml-2.5 pb-2 py-2 hover:bg-blue-600 hover:list-disc"><a href="#" class="">Sub-menu Item 2</a></li>
<li class="pl-5 ml-2.5 pb-2 py-2 hover:bg-blue-600 hover:list-disc"><a href="#" class="">Sub-menu Item 3</a></li>
<li class="pl-5 ml-2.5 pb-2 py-2 hover:bg-blue-600 hover:list-disc"><a href="#" class="">Sub-menu Item 4</a></li>
</ul>
</li>
</ul>
<div class="py-5 w-full divide-y divide-blue-400">
<div class="pl-2 pb-5">
<span href="#" class="">Current Buy Price:</span>
<span class="">100</span>
</div>
<div class="pt-10 w-full flex justify-center">
<button class="flex-grow border-t-2 border-l-2 border-b-2 rounded-l py-1 px-5">Sign in</button>
<span class="border-solid border-2 rounded-full p-2 my-1 text-xs">OR</span>
<button class="flex-grow border-t-2 border-r-2 border-b-2 rounded-r py-1 px-5">Sign up</button>
</div>
</div>
</div>
</nav><nav class="my-4 rounded border-gray-200 bg-white px-2 py-2.5 sm:px-4">
<div class="container flex flex-wrap items-center justify-between">
<a href="https://github.com/jsvigneshkanna/tailwind_ui_components" class="flex items-center">
<img src="https://placeholderlogo.com/img/placeholder-logo-1.png" class="mr-3 h-9" alt="Tailwind Logo" />
</a>
<form>
<label for="default-search" class="sr-only mb-2 text-sm font-medium text-gray-900">Search</label>
<div class="relative">
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
<svg aria-hidden="true" class="h-5 w-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</div>
<input type="search" id="default-search" class="block w-full rounded-full border border-gray-300 bg-gray-50 p-2 pl-10 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500" placeholder="Search" required />
</div>
</form>
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mr-2 h-6 w-6 text-gray-700">
<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
</svg>
<button type="button" class="mr-3 flex rounded-full bg-gray-800 text-sm focus:ring-4 focus:ring-gray-300 md:mr-0" id="user-menu-button" aria-expanded="false" data-dropdown-toggle="user-dropdown" data-dropdown-placement="bottom">
<img class="h-8 w-8 rounded-full" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRkSQpuRwKcQD_-_2yf6EGsw56SsFVa4jdKaQ&usqp=CAU" alt="user photo" />
</button>
<button class="rounded bg-blue-500 py-2 px-4 text-xs font-bold text-white hover:bg-blue-700">New Project</button>
</div>
</div>
</nav><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
<nav class="bg-gray-800 shadow-md">
<div
class="container flex px-4 mx-auto sm:space-x-4 justify-center"
>
<div class="w-full mt-2 sm:inline-flex sm:w-auto sm:mt-0">
<ul
class="flex flex-col w-full space-y-2 sm:w-auto sm:flex-row sm:space-y-0 sm:space-x-2"
>
<li>
<a
href="#"
class="flex px-4 py-2 font-medium text-white hover:bg-red-600"
>Home</a
>
</li>
<li>
<a
href="#"
class="flex px-4 py-2 font-medium text-white hover:bg-red-600"
>About</a
>
</li>
<!-- dropdown -->
<li class="relative">
<button
href="#"
name="close"
class="flex w-full px-4 py-2 font-medium text-white outline-none focus:outline-none hover:bg-red-600"
onclick="Open(this)"
>
Clients
<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 pl-1"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
/>
</svg>
</button>
<!-- dropdown menu -->
<div
class="right-0 p-2 mt-1 bg-white shadow sm:absolute dropdown opacity-0"
>
<ul class="space-y-2 sm:w-48">
<li>
<a
href="#"
class="flex p-2 font-medium text-gray-600 hover:bg-gray-100 hover:text-black"
>Burger King</a
>
</li>
<li>
<a
href="#"
class="flex p-2 font-medium text-gray-600 hover:bg-gray-100 hover:text-black"
>Southwest Airlines</a
>
</li>
<li>
<a
href="#"
class="flex p-2 font-medium text-gray-600 hover:bg-gray-100 hover:text-black"
>Levi Strauss</a
>
</li>
</ul>
</div>
<!-- dropdown menu -->
</li>
<!-- dropdown -->
<li>
<a
href="#"
class="flex px-4 py-2 font-medium text-white hover:bg-red-600"
>Services</a
>
</li>
<li>
<a
href="#"
class="flex px-4 py-2 font-medium text-white hover:bg-red-600"
>Contact</a
>
</li>
</ul>
</div>
<!-- menu -->
</div>
<!-- container -->
</nav>
</body>
<script>
function Open(e) {
let dropdown = document.querySelector(".dropdown");
if (e.name == "close") {
dropdown.classList.remove("opacity-0");
dropdown.classList.add("opacity-100");
e.name = "open";
} else {
dropdown.classList.remove("opacity-100");
dropdown.classList.add("opacity-0");
e.name = "close";
}
}
</script>
</html>