JSFiddle - React, Tailwind, and code Playground

HTML

<header>
  <button id="btn">Push me</button>
</header>
<nav id="nav">
  <ul>
    <li><a href="#">text</a></li>
    <li><a href="#">text</a></li>
    <li><a href="#">text</a></li>
    <li><a href="#">text</a></li>
    <li><a href="#">text</a></li>
  </ul>
</nav>

CSS

body,
ul {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  text-transform: uppercase;
}

ul {
  list-style: none;
}

header {
  position: fixed;
  top: 0;
  width: 100%;
  margin: 10px 0px;
  height: 60px;
  background: green;
  text-align: center;
}

nav {
  position: absolute;
  top: 0;
  width: 100%;
  margin: 10px 0px;
  height: 60px;
  z-index: -1;
  transition: .5s top;
  background: red;
}

li {
  display: inline-block;
  margin: 0 20px;
}

.opened {
  top: 70px;
}

JavaScript

$(document).ready(function() {
  $("#btn").on("click", function() {
    $("#nav").toggleClass("opened");
  });
});