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

1. Standard Logo Navbar

<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>

2. Animated Navbar

<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>

3. Mobile NavBar Icons

<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>

4. Standard Mobile Navbar

<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>

5. Search Navbar

<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>

6. Center Dropdown Navbar

<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>

7. Navbar Social Icons

<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>