JSFiddle - React, Tailwind, and code Playground

HTML

<div class="Header">
  <div class="gradOne"><div class="gradTwo">
    <h1><font>E</font>BOT</h1>
    <p>FRESH DECISIONS<br>
      FOR YOUR WEB SITES<br>
      AND APPLICATIONS</p>
    <div class="menu">
      <div></div>
      <div></div>
      <div></div>
    </div>
    <ul class="hiddenMenu">
      <li>Main Page</li>
      <li>Portfolio</li>
      <li>Our crew</li>
      <li>Contact us</li>
    </ul>
    </div></div>
</div>

CSS

.Header{
background: #000000;
    height:500px;
    width:100%;
    min-width:1170px;;
    box-shadow:0 0 4px 0 black;
    color: white;
    font-family: "Corbel Regular", sans-serif;
}
.gradOne {
    background: linear-gradient(#000000, rgba(25,25,25, 1));
    height:72px;
}
.gradTwo {
    background: linear-gradient(#1a1a1a, rgba(38,37,37, 1));
    height: 36px;
}
h1 {
    font-size: 74px;
padding: 0 48px 0 42px;
    float:left;
}
font {
    color:#cb3838;
}
p {font-family: "MS Reference Sans Serif", sans-serif; }
header p {
float:left;
    padding-top:2px;
    line-height: 1.509;
    font-size:15px;
}
.menu {
    float: right;
    padding: 8px 20px 0 0;
}
.menu div {
    border-radius: 4px;
    height: 13px;
    width: 66px;
    background-color: white;
    margin-bottom: 8px;
}
.menu:hover div {
    background-color: #cb3838;
}
.menu ul {
    color: black;
}
.menu li {
    position: absolute;

}
.hiddenMenu {

}
.hidden {
    display: none;
}

JavaScript

(function(){
  var menu = document.querySelector('.menu')
  var hiddenMenu = document.querySelector('.hiddenMenu')
  var toggleMenu = function(){
    var isHidden = (hiddenMenu.style.display == 'none')
    hiddenMenu.style.display = isHidden ? 'block' : 'none'
  }
  menu.addEventListener('click', toggleMenu)
})()