JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://qtip1.com/packages/1.0.0-rc3/jquery.qtip-1.0.0-rc3.js"></script>
<div id="toggle">menu</div>
<div id="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Support</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

CSS

#nav {
    display: none;
}
#toggle {
    background-color: #FF9;
    width: 100%;
}
#toggle::after {
    content: "≡";
    float: right;
}
@media only screen and (min-width: 400px) {
#nav {
    display: block!important;
}
#toggle {
    display: none;  
}
#nav li {
    float: left;
}
}

JavaScript

$(document).ready(function(){
    $("#toggle").click(function(){
        $("#nav").slideToggle(500);
    });
});