JSFiddle - React, Tailwind, and code Playground
HTML
<a href="" class="open-menu">Toggle menu</a>
<nav class="menu">
<ul>
<li>Home</li>
<li>Motivation</li>
<li>Books</li>
<li>Videos</li>
</ul>
</nav>
<p>
To facilitate the process, AI Lab hackers had built a system that displayed both the "source" and "display" modes on a split screen. Despite this innovative hack, switching from mode to mode was still a nuisance.
</p>
CSS
.menu {
visibility: hidden;
}
.menu.opened {
visibility: visible;
}
JavaScript
var openMenuBtn = document.getElementsByClassName('open-menu')[0],
menu = document.getElementsByClassName('menu')[0];
openMenuBtn.addEventListener('click', function ( e ) {
e.preventDefault();
menu.classList.toggle('opened');
}, false);