JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div id="main-menu">
    <button class="menu-toggle">Menu</button>
    <ul>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
    </ul>
</div>
<button class="menu-toggle">Menu</button>

CSS

#main-menu {
    display: block;
    position: fixed;
    width: 100%;
    top: 0;
    bottom: 0;
    right: -100%;
    margin: 0;
    background-color: #333;
    color: #fff;
    transition: right 500ms;
    overflow-y: auto;
}
#main-menu.menu-open {
    right: 0;
}
#main-menu ul{
    margin: 0;
    padding: 0;
}
#main-menu ul li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

JavaScript

$('.menu-toggle').each(function () {
    $(this).click(function () {
        if ($('#main-menu').hasClass('menu-open')) {
            $('#main-menu').removeClass('menu-open');
        } else {
            $('#main-menu').addClass('menu-open');
        }
    });
});