JSFiddle - React, Tailwind, and code Playground

by iii l

HTML

<a href="#" class="menu">menu</a>
<div class="modal">
    <a href="#" class="close">close</a>
    <nav>
        <ul>
            <li>home</li>
            <li>link1</li>
        </ul>
    </nav>
</div>

CSS

.modal {
    position:absolute;
    top:0;
    bottom:0;
    left:-100%;
    background:#12aef5;
    width:100%;
     -webkit-transition: all ease-out 0.5s;
     -moz-transition: all ease-out 0.5s;
     -o-transition: all ease-out 0.5s;
     transition: all ease-out 0.5s;
}
.modal.active {
    left:0;
}
.close {
    position:absolute;
    right:20px;
    top:20px;
}

JavaScript

$('a.menu').on('click', function(e){
    $('.modal').addClass('active');
    e.preventDefault();
});
$('a.close').on('click', function(e){
    $('.modal').removeClass('active');
    e.preventDefault();
});