Toggle menu

Following example shows how to create toggle button with Tailwind CSS and Javascript inlined in HTML:

<nav>
  <ul>
    <li>
      <button
        type="button"
        aria-expanded="false"
        class="group peer flex w-full justify-between rounded px-3 py-2 hover:bg-gray-200 dark:hover:bg-gray-950/50"
        onclick="(function toggle(button) { button.setAttribute('aria-expanded', button.getAttribute('aria-expanded') === 'true' ? 'false' : 'true')})(this)"
      >
        <span>Toggle button</span>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          height="24px"
          width="24px"
          class="fill-natural-500 transition ease-in-out group-aria-expanded:rotate-90 dark:fill-gray-400"
        >
          <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
        </svg>
      </button>
      <ul class="hidden peer-aria-expanded:block">
        <li>
          <a
            href="#"
            class="flex w-full rounded px-2.5 py-1.5 hover:bg-gray-200 dark:hover:bg-gray-950/50"
            >Link one</a
          >
        </li>
        <li>
          <a
            href="#"
            class="flex w-full rounded px-2.5 py-1.5 hover:bg-gray-200 dark:hover:bg-gray-950/50"
            >Link two</a
          >
        </li>
      </ul>
    </li>
  </ul>
</nav>

https://play.tailwindcss.com/HxHvapkYPw

or you can extract toggle button javascript to separate file:

document.querySelectorAll("button[aria-expanded]").forEach((button) => {
  button.addEventListener("click", () => {
    button.setAttribute(
      "aria-expanded",
      button.getAttribute("aria-expanded") === "true" ? "false" : "true",
    );
  });
});