JSFiddle - React, Tailwind, and code Playground

by Dhruvil Patel

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<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>

</html>

CSS

body {
  margin: 0;
}

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";
  }
}

$(function() {
  var navbarHeight = $("#nav").outerHeight();
  var h2Offset = $("h2").offset();
  var h2OffsetTop = h2Offset.top;
  var scrollFinal = h2OffsetTop - navbarHeight;

  $("a").click(function(e) {
    e.preventDefault();
    $('html, body').animate({
      scrollTop: scrollFinal
    }, 1000);
  });
});