JSFiddle - React, Tailwind, and code Playground

by Noel Calonia

HTML

<!DOCTYPE HTML>
<body>
  <header>
    <h2>
      HEADER
    </h2>
  </header>
  <nav>
    <ul>
      <a href="javascript:void(0)"><li>Home</li></a>
      <a href="javascript:void(0)"><li>About</li></a>
      <a href="javascript:void(0)"><li>Blog</li></a>
      <a href="javascript:void(0)"><li>FAQ</li></a>
      <a href="javascript:void(0)"><li>Contact</li></a>
    </ul>
  <div class="menu-res">
    Menu
  </div>
  </nav>
</body>

CSS

body{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

header {
  margin: 0;
  padding: 10px 40px;
  width: 100%;
  background-color: #333;
  color: #FFF;
}

nav ul {
  background-color: #395fcc;
  overflow: hidden;
  text-align: center;
  margin: 0;
  padding: 0;
}

nav ul li {
  display: inline-block;
  padding: 20px;
  transition: all .5s ease-out;
  -webkit-transition: all .5s ease-out;
}

nav ul li:hover {
  background-color: #999;
  color: #333;
  transition: all .5s ease-in;
  -webkit-transition: all .5s ease-in;
}

a {
  text-decoration: none;
  color: #fff;
}

.menu-res {
  width: 100%;
  background-color: #555;
  box-sizing: border-box;
  text-align: left;
  padding: 15px 10px;
  cursor: pointer;
  color: #fff;
  display: none;
}

@media screen and (max-width: 580px) {
  nav ul{
    display: none;
  }
  
  nav ul li {
    box-sizing: border-box;
    width: 100%;
    padding: 20px;
    text-align: left;
  }
  
  .menu-res {
    display: block;
  }
}

JavaScript

$(".menu-res").click(function () {
	$("nav ul").slideToggle();
});

$(window).resize(function () {
	if ($(window).width() > 580) {
  	$("nav ul").removeAttr("style");
  }
});