JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div id="nav" class="sidenav">
    <a href="javascript:void(0)">HOME</a>
    <a href="javascript:void(0)" class="show">About Us</a>
    <a href="javascript:void(0)" target="_self">Link</a>
    <a href="javascript:void(0)" target="_self">Link1</a>
    <a href="javascript:void(0)" target="_self">Link2</a>
    <a href="javascript:void(0)" target="_self">Link3</a>
    <a href="javascript:void(0)" target="_self">Link4</a>
    <a href="javascript:void(0)" class="icon" onclick="myFunction()">&#9776;</a>
  </div>
  <div class="content">
    <h1>Head</h1>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <h2 id="h2">Heading-2</h2>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p><a href="#h2">Go</a>
  </div>
</body>

CSS

body {
  margin: 0;
}

h2{
  padding-top: 30px;
}

h1 {
  margin-left: 20px;
  font-weight: bold;
  text-align: center;
  font-family: 'High Tower Text';
  outline: ridge 5px #fffd78;
  padding: 10px;
  background-color: rgb(56, 62, 50);
  color: #fffd78;
}

.sidenav a {
  display: block;
  float: left;
  color: black;
  line-height: 25px;
}

.sidenav a:hover:not(.active) {
  background-color: rgb(56, 62, 50);
  color: #fffd78;
  transition: 0.5s;
}

.sidenav {
  line-height: 25px;
  z-index: 3;
  opacity: 1;
  width: 100%;
  position: fixed;
  height: auto;
  top: 0;
  background-color: #f1f1f1;
}

div.content {
  z-index: 1;
  margin-left: 0;
  margin-right: 45px;
  margin-top: 41px;
}

.sidenav a:not(:first-child) {
  display: none;
}

.sidenav a.show {
  display: block;
}

.sidenav a.icon {
  background-color: #f1f1f1;
  float: right;
  display: block;
}

.sidenav.responsive {
  position: fixed;
  z-index: 3;
  height: 100%;
}

.sidenav.responsive a.icon {
  position: absolute;
  right: 0;
  top: 0;
}

.sidenav.responsive a {
  float: none;
  display: block;
  text-align: left;
}

.sidenav.responsive a.show {
  display: block !important;
}

JavaScript

function myFunction() {
  var x = document.getElementById("nav");
  if (x.className === "sidenav") {
    x.className += " responsive";
  } else {
    x.className = "sidenav";
  }
}