JSFiddle - React, Tailwind, and code Playground

by cmruser

HTML

<div class="off-canvas-wrap">
    <div class="inner-wrap">
<a class="left-off-canvas-toggle" >Menu</a> 

    <!-- Off Canvas Menu -->
    <aside class="left-off-canvas-menu">
        <!-- whatever you want goes here -->
        <ul>
          <li><a href="#">Item 1</a></li>
        </ul>
    </aside>

    <!-- main content goes here -->
    <p>Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire. Hari </p>

  <!-- close the off-canvas menu -->
  <a class="exit-off-canvas"></a>
    </div>
</div>

CSS

*,*:before,*:after { box-sizing:border-box;}
.off-canvas-wrap {
    position:relative;
    width:100%;
    overflow:hidden;
}
.inner-wrap {
    position:relative;
    width:100%;
    -webkit-transition:-webkit-transform 500ms ease;
}
.inner-wrap:before, .inner-wrap:after { content:" "; display:table;}
.inner-wrap:after { clear:both;}



.left-off-canvas-menu {
    width:250px;
    top:0;
    bottom:0;
  
    position:absolute;
    box-sizing: content-box;
    -webkit-transform: translate3d(-100%, 0, 0);
    background-color:#ccc;
}
.move-right .inner-wrap {
-webkit-transform:translate3d(250px, 0,0);
}

JavaScript

$('.left-off-canvas-toggle').on('click', function(){
    $(this).closest('.off-canvas-wrap').toggleClass('move-right');
});