JSFiddle - React, Tailwind, and code Playground

HTML

<nav id='slideout'>
    <a href='' class='menu-toggle'>Close menu</a>
        
    <ul>
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
    </ul>
</nav>
<section id='page-content'>
    <a href='' class='menu-toggle'>Open menu</a>
    
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu dictum tortor. Aenean id sem lobortis, luctus nunc ut, auctor tellus. Mauris et euismod erat. Aenean sollicitudin sapien id tellus convallis, vitae facilisis dui luctus. Cras id tincidunt est, non auctor lectus. Aliquam eleifend, turpis quis vulputate laoreet, risus ligula tincidunt lorem, et mollis sapien lacus at orci. Pellentesque euismod feugiat tortor, ac maximus neque fringilla id. Praesent ut egestas purus. Aenean nec porttitor urna.
    </p>
</section>

CSS

#slideout {
    position: absolute;
    top: 0px;
    left: 0px;
    transform: translatex(-100%);
    transition: all 200ms ease-in-out;
    
    background: #cecece;
    padding: 20px;
    height: 100%;
}

#slideout.show {
    transform: translatex(0%);
    transition: all 200ms ease-in-out;
}

JavaScript

$(function () {
   $('.menu-toggle').click(function () {
      $('#slideout').toggleClass('show');

       return false;
   });
});