JSFiddle - React, Tailwind, and code Playground
HTML
click anywhere to toggle menu
<nav>
<a class="nav-btn">Logo</a>
<ul>
<li><a href="">Menu 1</a></li>
<li><a href="">Menu 1</a></li>
<li><a href="">Menu 1</a></li>
<li><a href="">Menu 1</a></li>
<li><a href="">Menu 1</a></li>
</ul>
<a class="nav-btn">Logo</a>
</nav>
CSS
a, li {
display: block;
width: 100px;
height: 100px;
background-color: red;
float: left;
border: 1px solid yellow;
padding: 0;
margin: 0;
}
ul {
margin: 0;
padding: 0;
display: none;
}
JavaScript
$(document).ready(function() {
$(document).on('click', function() {
$('ul').toggle();
});
});