Guess, IRL where no navbars in website which has 20 pages. This would rather increase the memory power in memorizing all the URLs 🤪
NOTE: Kindly make the codepen result screen view port to 0.5x in mobile devices
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<nav
class="bg-gray-600 p-5 shadow md:flex md:items-center md:justify-between"
>
<div class="flex items-center justify-between">
<span class="cursor-pointer font-[Poppins] text-2xl">
<img
class="inline h-10 w-20"
src="https://source.unsplash.com/random"
onclick="send()"
/>
</span>
<span class="mx-2 block cursor-pointer text-3xl md:hidden">
<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="h-6 w-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="absolute left-0 top-[-400px] z-[-1] w-full bg-gray-600 py-4 pl-7 text-white opacity-0 transition-all duration-500 ease-in md:static md:z-auto md:flex md:w-auto md:items-center md:py-0 md:pl-0 md:opacity-100"
>
<li class="mx-4 my-6 md:my-0">
<a
href="https://tailwindcsscomponents.vercel.app/"
target="_blank"
rel="noreferrer"
class="text-xl duration-500 hover:text-cyan-500"
>Home</a
>
</li>
<li class="mx-4 my-6 md:my-0">
<a
href="https://tailwindcsscomponents.vercel.app/"
target="_blank"
rel="noreferrer"
class="text-xl duration-500 hover:text-cyan-500"
>Component</a
>
</li>
<li class="mx-4 my-6 md:my-0">
<a
href="https://tailwindcsscomponents.vercel.app/"
target="_blank"
rel="noreferrer"
class="text-xl duration-500 hover:text-cyan-500"
>About Us</a
>
</li>
<li class="mx-4 my-6 md:my-0">
<a
href="https://tailwindcsscomponents.vercel.app/"
target="_blank"
rel="noreferrer"
class="text-xl duration-500 hover:text-cyan-500"
>FAQs</a
>
</li>
<h2 class=""></h2>
</ul>
</nav>
<script>
function send() {
window.location.href = "https://github.com/jsvigneshkanna";
}
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><div class="h-screen bg-sky-300">
<nav
class="relative my-3 mb-3 flex flex-wrap items-center justify-between bg-sky-700 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="https://tailwindcsscomponents.vercel.app/"
target="_blank"
rel="noreferrer"
>
VK Tailwind
</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-sky-300">
<a
class="flex items-center gap-2 px-3 py-2 text-xs font-bold leading-snug text-white hover:text-indigo-800"
href="https://tailwindcsscomponents.vercel.app/"
target="_blank"
rel="noreferrer"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="h-6 w-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
/>
</svg>
Home
</a>
</li>
<li class="nav-item rounded-t-xl hover:bg-sky-300">
<a
class="flex items-center gap-2 px-3 py-2 text-xs font-bold leading-snug text-white hover:text-indigo-800"
href="https://tailwindcsscomponents.vercel.app/"
target="_blank"
rel="noreferrer"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="h-6 w-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605"
/>
</svg>
Component
</a>
</li>
<li class="nav-item rounded-t-xl hover:bg-sky-300">
<a
class="flex items-center gap-2 px-3 py-2 text-xs font-bold leading-snug text-white hover:text-indigo-800"
href="https://tailwindcsscomponents.vercel.app/"
target="_blank"
rel="noreferrer"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="h-6 w-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M4.26 10.147a60.436 60.436 0 00-.491 6.347A48.627 48.627 0 0112 20.904a48.627 48.627 0 018.232-4.41 60.46 60.46 0 00-.491-6.347m-15.482 0a50.57 50.57 0 00-2.658-.813A59.905 59.905 0 0112 3.493a59.902 59.902 0 0110.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.697 50.697 0 0112 13.489a50.702 50.702 0 017.74-3.342M6.75 15a.75.75 0 100-1.5.75.75 0 000 1.5zm0 0v-3.675A55.378 55.378 0 0112 8.443m-7.007 11.55A5.981 5.981 0 006.75 15.75v-1.5"
/>
</svg>
About Us
</a>
</li>
<li class="nav-item rounded-t-xl hover:bg-sky-300">
<a
class="flex items-center gap-2 px-3 py-2 text-xs font-bold leading-snug text-white hover:text-indigo-800"
href="https://tailwindcsscomponents.vercel.app/"
target="_blank"
rel="noreferrer"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="h-6 w-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23-.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5"
/>
</svg>
FAQs
</a>
</li>
</ul>
</div>
</div>
</nav>
</div><div class="h-screen bg-sky-300 pt-4">
<nav
class="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="https://tailwindcsscomponents.vercel.app/"
target="_blank"
rel="noreferrer"
class="flex items-center"
>
<span
class="self-center whitespace-nowrap text-xl font-semibold dark:text-white"
>
VK Tailwind
</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="https://tailwindcsscomponents.vercel.app/"
target="_blank"
rel="noreferrer"
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>
Component
</a>
</li>
<li>
<a
href="https://tailwindcsscomponents.vercel.app/"
target="_blank"
rel="noreferrer"
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 Us
</a>
</li>
<li>
<a
href="https://tailwindcsscomponents.vercel.app/"
target="_blank"
rel="noreferrer"
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>
FAQs
</a>
</li>
</ul>
</div>
</div>
</nav>
</div><nav class="h-max min-h-screen divide-y divide-blue-400 bg-sky-700 text-white">
<div class="flex w-full items-center justify-between px-5 py-3">
<div class="">
<span class="">VK Tailwind</span>
</div>
<button class="rounded border-2 border-solid 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="h-6 w-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="h-full divide-y divide-blue-400 px-5 py-3">
<ul class="w-full pb-3">
<li class="py-2 px-2 hover:bg-blue-600">
<a
href="https://tailwindcsscomponents.vercel.app/"
target="_blank"
rel="noreferrer"
class=""
>Menu Item 1</a
>
</li>
<li class="w-full divide-x divide-blue-300 py-2">
<a
href="https://tailwindcsscomponents.vercel.app/"
target="_blank"
rel="noreferrer"
class="flex p-2 hover:bg-blue-600"
>Menu Item 2</a
>
<ul class="ml-2">
<li class="mt-2 ml-2.5 py-2 pl-5 hover:list-disc hover:bg-blue-600">
<a
href="https://tailwindcsscomponents.vercel.app/"
target="_blank"
rel="noreferrer"
class=""
>Sub-menu Item 1</a
>
</li>
<li class="ml-2.5 py-2 pl-5 pb-2 hover:list-disc hover:bg-blue-600">
<a
href="https://tailwindcsscomponents.vercel.app/"
target="_blank"
rel="noreferrer"
class=""
>Sub-menu Item 2</a
>
</li>
<li class="ml-2.5 py-2 pl-5 pb-2 hover:list-disc hover:bg-blue-600">
<a
href="https://tailwindcsscomponents.vercel.app/"
target="_blank"
rel="noreferrer"
class=""
>Sub-menu Item 3</a
>
</li>
<li class="ml-2.5 py-2 pl-5 pb-2 hover:list-disc hover:bg-blue-600">
<a
href="https://tailwindcsscomponents.vercel.app/"
target="_blank"
rel="noreferrer"
class=""
>Sub-menu Item 4</a
>
</li>
</ul>
</li>
</ul>
<div class="w-full divide-y divide-blue-400 py-5">
<div class="pl-2 pb-5">
<span
href="https://tailwindcsscomponents.vercel.app/"
target="_blank"
rel="noreferrer"
class=""
>Current Buy Price:</span
>
<span class="">69</span>
</div>
<div class="flex w-full justify-center pt-10">
<button
class="flex-grow rounded-l border-t-2 border-l-2 border-b-2 py-1 px-5"
>
Sign in
</button>
<span class="my-1 rounded-full border-2 border-solid p-2 text-xs"
>OR</span
>
<button
class="flex-grow rounded-r border-t-2 border-r-2 border-b-2 py-1 px-5"
>
Sign up
</button>
</div>
</div>
</div>
</nav><div class="h-screen bg-sky-300 pt-5">
<nav class="mx-2 rounded-lg border-rose-200 bg-rose-50 py-4 px-2">
<div class="container flex flex-wrap items-center justify-between">
<a
href="https://tailwindcsscomponents.vercel.app/"
target="_blank"
rel="noreferrer"
class="flex items-center"
>
<img
src="https://placeholderlogo.com/img/placeholder-logo-1.png"
class="mr-3 h-9"
alt="VK 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://media.istockphoto.com/photos/headshot-portrait-of-smiling-male-employee-in-office-picture-id1309328823?s=612x612"
alt="user photo"
/>
</button>
<button
class="rounded bg-rose-500 py-2 px-4 text-xs font-bold text-white hover:bg-rose-700"
>
New Project
</button>
</div>
</div>
</nav>
</div><script src="https://cdn.tailwindcss.com"></script>
<div class="h-screen bg-sky-300">
<nav class="bg-rose-800 shadow-lg shadow-yellow-100">
<div class="container mx-auto flex justify-center px-4 py-5 sm:space-x-4">
<div class="mt-2 w-full sm:mt-0 sm:inline-flex sm:w-auto">
<ul
class="flex w-full flex-col space-y-2 sm:w-auto sm:flex-row sm:space-y-0 sm:space-x-2"
>
<li>
<a
href="https://tailwindcsscomponents.vercel.app/"
target="_blank"
rel="noreferrer"
class="flex px-4 py-2 font-medium text-white hover:bg-red-600"
>Home</a
>
</li>
<li>
<a
href="https://tailwindcsscomponents.vercel.app/"
target="_blank"
rel="noreferrer"
class="flex px-4 py-2 font-medium text-white hover:bg-red-600"
>About Us</a
>
</li>
<li class="relative">
<button
href="https://tailwindcsscomponents.vercel.app/"
target="_blank"
rel="noreferrer"
name="close"
class="flex w-full px-4 py-2 font-medium text-white outline-none hover:bg-red-600 focus:outline-none"
onclick="Open(this)"
>
UI Components
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="h-6 w-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>
<div
class="dropdown right-0 mt-1 bg-white p-2 opacity-0 shadow sm:absolute"
>
<ul class="space-y-2 sm:w-48">
<li>
<a
href="https://tailwindcsscomponents.vercel.app/"
target="_blank"
rel="noreferrer"
class="flex p-2 font-medium text-gray-600 hover:bg-gray-100 hover:text-black"
>Buttons</a
>
</li>
<li>
<a
href="https://tailwindcsscomponents.vercel.app/"
target="_blank"
rel="noreferrer"
class="flex p-2 font-medium text-gray-600 hover:bg-gray-100 hover:text-black"
>Forms</a
>
</li>
<li>
<a
href="https://tailwindcsscomponents.vercel.app/"
target="_blank"
rel="noreferrer"
class="flex p-2 font-medium text-gray-600 hover:bg-gray-100 hover:text-black"
>Alerts</a
>
</li>
</ul>
</div>
</li>
<li>
<a
href="https://tailwindcsscomponents.vercel.app/"
target="_blank"
rel="noreferrer"
class="flex px-4 py-2 font-medium text-white hover:bg-red-600"
>FAQs</a
>
</li>
<li>
<a
href="https://tailwindcsscomponents.vercel.app/"
target="_blank"
rel="noreferrer"
class="flex px-4 py-2 font-medium text-white hover:bg-red-600"
>Contact Us</a
>
</li>
</ul>
</div>
</div>
</nav>
<h2 class="mt-20 text-center text-lg font-semibold text-gray-800">
Kindly make the codepen to 0.5x size to get the feel of navbar
</h2>
</div>
<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><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><head>
<script src="https://cdn.tailwindcss.com"></script>
<style>
#navlinks {
animation: translate .5s;
}
@keyframes translate {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0);
}
}
.athover {
display: inline-block;
backface-visibility: hidden;
vertical-align: middle;
position: relative;
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
tranform: translateZ(0);
transition-duration: .3s;
transition-property: transform;
}
.athover:before {
position: absolute;
pointer-events: none;
z-index: -1;
content: '';
top: 100%;
left: -15%;
margin-top: 15px;
height: 12px;
width: 130%;
opacity: 0;
background: -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 80%);
background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 80%);
/* W3C */
transition-duration: 0.3s;
transition-property: transform, opacity;
}
.athover:hover,
.athover:active,
.athover:focus {
transform: translateY(-5px);
}
.athover:hover:before,
.athover:active:before,
.athover:focus:before {
opacity: 1;
transform: translateY(-5px);
}
</style>
<script>
tailwind.config = {
theme: {
extend: {
keyframes: {
sbounce: {
"16.65%": { transform: 'translateY(8px)', },
"33.3%": { transform: 'translateY(-6px)', },
"49.95%": { transform: 'translateY(4px)', },
"66.6%": { transform: 'translateY(-2px)', },
"83.25%": { transform: 'translateY(1px)', },
"100%": { transform: 'translateY(0)', },
}
},
animation: {
'Nbounce': 'sbounce 2s linear',
},
}
}
}
</script>
</head>
<body bgcolor="black">
<nav class="bg-white px-2 sm:px-4 py-2.5 dark:bg-black fixed w-full z-20 top-0 left-0">
<div class="container flex flex-wrap md:justify-center items-center mx-auto justify-end">
<div class="flex items-center w-screen justify-between">
<div class="flex">
<span class="md:hidden text-gray-400 text-center">Click On Hamburger Icon</span>
<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 md:hidden text-gray-400 ml-2">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
</svg>
</div>
<button type="button" id="hamburger"
class="relative w-10 h-10 md:hidden">
<div role="hidden" id="line"
class="inset-0 w-6 h-0.5 m-auto rounded-full bg-gray-500 transition duration-300"></div>
<div role="hidden" id="line2"
class="inset-0 w-6 h-0.5 mt-1.5 m-auto rounded-full bg-gray-500 transition duration-300">
</div>
<div role="hidden" id="line3"
class="inset-0 w-6 h-0.5 mt-1.5 m-auto rounded-full bg-gray-500 transition duration-300">
</div>
</button>
</div>
<div class="hidden justify-between items-center w-full md:flex md:w-auto" id="navbar-sticky"">
<ul
class=" flex flex-col p-4 mt-4 rounded-lg md:flex-row md:space-x-24 md:mt-0 md:text-sm
md:font-medium md:border-0 md:bg-white dark:bg-black md:dark:bg-black items-center">
<li>
<a href="https://tailwindcsscomponents.vercel.app/components/navbars"
target="_blank"
rel="noreferrer"
class="nav py-2 pr-4 pl-3 m-1 text-gray-700 md:p-0 dark:hover:text-white dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:hover:bg-transparent dark:border-gray-700 uppercase athover"
aria-current="page">Home</a>
</li>
<li>
<a href="https://tailwindcsscomponents.vercel.app/components/navbars"
target="_blank"
rel="noreferrer"
class="nav py-2 pr-4 pl-3 m-1 text-gray-700 md:p-0 dark:hover:text-white dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:hover:bg-transparent dark:border-gray-700 uppercase athover"
aria-current="page">About</a>
</li>
<li>
<a href="https://tailwindcsscomponents.vercel.app/components/navbars"
target="_blank"
rel="noreferrer"
class="nav py-2 pr-4 pl-3 m-1 text-gray-700 md:p-0 dark:hover:text-white dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:hover:bg-transparent dark:border-gray-700 uppercase athover"
aria-current="page">Portfolio</a>
</li>
<li>
<a href="https://tailwindcsscomponents.vercel.app/components/navbars"
target="_blank"
rel="noreferrer"
class="nav py-2 pr-4 pl-3 m-1 text-gray-700 md:p-0 dark:hover:text-white dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:hover:bg-transparent dark:border-gray-700 uppercase athover"
aria-current="page">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div>
<div class="text-center mt-20">
<h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl md:text-6xl pt-2">
<span class="block xl:inline font-medium text-3xl text-white">Simple Navigation</span>
</h1>
<p
class="mt-3 text-base mx-auto text-white !sm:mx-auto sm:mt-5 sm:max-w-xl sm:text-lg md:mt-5 md:text-xl md:max-w-screen-md lg:max-w-screen-lg xl:max-w-screen-xl max-w-xs">
Based on Hover.css, the goal of this pen is to create a simple navigation bar
that can be easily reused in both mobile and native displays. Mouse over the nav text for animation!</p>
</div>
<script>
function onLoadBounce () {
function toggleActive (element, index, maxIndex) {
setTimeout(function () {
element.classList.add('animate-Nbounce');
setInterval(function () {
if (index > maxIndex) {
return;
}
element.classList.remove('animate-Nbounce');
}, 500);
}, 500 * index);
}
function runLoop () {
var allItems = document.getElementsByClassName('nav');
for (var index = 0; index < allItems.length; index++) {
var element = allItems[index];
toggleActive(element, index, allItems.length);
}
}
runLoop();
}
window.addEventListener('load', onLoadBounce);
let hamburger = document.querySelector('#hamburger')
let navlinks = document.querySelector('#navbar-sticky')
let line = hamburger.querySelector('#line')
let line2 = hamburger.querySelector('#line2')
let line3 = hamburger.querySelector('#line3')
hamburger.addEventListener('click', function () {
if (navlinks.classList.contains('hidden')) {
navlinks.classList.remove('hidden')
line.classList.add('rotate-45', 'absolute')
line2.classList.add('-rotate-45', 'absolute')
line2.classList.remove('mt-1.5')
line3.classList.add('hidden')
line3.classList.add('rotate-90', 'absolute')
} else {
navlinks.classList.add('hidden')
line.classList.remove('rotate-45', 'absolute')
line2.classList.remove('-rotate-45', 'absolute')
line2.classList.add('mt-1.5')
line3.classList.remove('hidden')
line3.classList.remove('rotate-90', 'absolute')
}
})
</script>
</body>