JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="en-US">

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Untitled</title>
    <style>
      .hidden {
        display: none;
      }

      .block {
        display: block;
      }

      .icon {
        fill: currentColor;
        height: 24px;
        width: 24px;
      }

    </style>
  </head>

  <body>
    <button id="btnHideShow">
      <svg class="icon" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <title>Menu</title>
        <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
      </svg>
    </button>

    <div id="menu" class="hidden">
      <p>I'm no longer hidden.</p>
    </div>

    <script>
      function myFunction() {
        var element = document.getElementById("menu");
        if (element.classList.contains("hidden")) {
          element.classList.replace("hidden", "block");
        } else if (element.classList.contains("block")) {
          element.classList.replace("block", "hidden");
        }
      }

      document.getElementById("btnHideShow").addEventListener("click", myFunction);

    </script>
  </body>

</html>