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>
<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><div class="h-screen bg-sky-300">
<nav class="border-gray-200 bg-white px-2 dark:border-gray-700 dark:bg-gray-900">
<div class="container mx-auto flex flex-wrap items-center justify-between">
<a href="https://tailwindcsscomponents.vercel.app/" target="_blank" rel="noreferrer" class="flex items-center"> </a>
<button data-collapse-toggle="mobile-menu" type="button" class="ml-3 inline-flex items-center justify-center rounded-lg text-gray-400 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:text-gray-400 dark:hover:text-white dark:focus:ring-gray-500 md:hidden" aria-controls="mobile-menu-2" aria-expanded="false">
<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 class="hidden w-full md:block md:w-auto" id="mobile-menu">
<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="https://tailwindcsscomponents.vercel.app/" target="_blank" rel="noreferrer" class="block rounded bg-blue-700 py-2 pr-4 pl-3 text-white dark:bg-blue-600 md:bg-transparent md:p-0 md:text-black md:dark:bg-transparent md:dark:text-white" aria-current="page">Home</a>
</li>
<li>
<a href="https://tailwindcsscomponents.vercel.app/" target="_blank" rel="noreferrer" class="block rounded py-2 pr-4 pl-3 text-gray-700 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-200 dark:hover:text-white md:border-0 md:p-0 md:hover:bg-transparent md:hover:text-blue-700 md:dark:hover:bg-transparent md:dark:hover:text-white">About US</a>
</li>
<li>
<button id="dropdownNavbarLink" data-dropdown-toggle="dropdownNavbar" class="flex w-full items-center justify-between rounded py-2 pr-4 pl-3 font-medium text-gray-700 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:text-white md:w-auto md:border-0 md:p-0 md:hover:bg-transparent md:hover:text-blue-700 md:dark:hover:bg-transparent">
Our Components <svg class="ml-1 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="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
<div id="dropdownNavbar" class="z-10 hidden w-44 divide-y divide-gray-100 rounded bg-white font-normal shadow dark:divide-gray-600 dark:bg-gray-700" data-popper-reference-hidden="" data-popper-escaped="" data-popper-placement="bottom" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(0px, 454.4px, 0px);">
<ul class="py-1 text-sm text-gray-700 dark:text-gray-400" aria-labelledby="dropdownLargeButton"></ul>
<div class="py-1">
<a href="https://tailwindcsscomponents.vercel.app/" target="_blank" rel="noreferrer" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white">Sign out</a>
</div>
</div>
</li>
<li></li>
<li></li>
<li></li>
<li></li>
<svg class="text-black-600 h-6 w-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
</svg>
<svg class="text-black-300 h-6 w-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="32" height="32" viewBox="0 0 32 32" style=" fill:#000000;"><path d="M 11.46875 5 C 7.917969 5 5 7.914063 5 11.46875 L 5 20.53125 C 5 24.082031 7.914063 27 11.46875 27 L 20.53125 27 C 24.082031 27 27 24.085938 27 20.53125 L 27 11.46875 C 27 7.917969 24.085938 5 20.53125 5 Z M 11.46875 7 L 20.53125 7 C 23.003906 7 25 8.996094 25 11.46875 L 25 20.53125 C 25 23.003906 23.003906 25 20.53125 25 L 11.46875 25 C 8.996094 25 7 23.003906 7 20.53125 L 7 11.46875 C 7 8.996094 8.996094 7 11.46875 7 Z M 21.90625 9.1875 C 21.402344 9.1875 21 9.589844 21 10.09375 C 21 10.597656 21.402344 11 21.90625 11 C 22.410156 11 22.8125 10.597656 22.8125 10.09375 C 22.8125 9.589844 22.410156 9.1875 21.90625 9.1875 Z M 16 10 C 12.699219 10 10 12.699219 10 16 C 10 19.300781 12.699219 22 16 22 C 19.300781 22 22 19.300781 22 16 C 22 12.699219 19.300781 10 16 10 Z M 16 12 C 18.222656 12 20 13.777344 20 16 C 20 18.222656 18.222656 20 16 20 C 13.777344 20 12 18.222656 12 16 C 12 13.777344 13.777344 12 16 12 Z"></path></svg>
</ul>
</div>
</div>
</nav>
</div>