JSFiddle - React, Tailwind, and code Playground

HTML

<div id="all">
    <div id="menu">1</div>
    <div id="text"><button id="usButton">toggle</button></div>
</div>

CSS

body {overflow-x:hidden;padding:0;margin:0;}
#all {
    -ms-transform:translate3d(0,0,0);
    -webkit-transform:translate3d(0,0,0);
    -o-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0);
}
#menu {position:fixed;background-color:#f00;z-index:1;left:-100px;width:100px;}
#text {}

JavaScript

var usrObj = $("#all");
$("#usButton").click(function(){
    if (!usrObj.hasClass('active')) {
        usrObj.css({
            '-webkit-transform':'translateX(100px)',
            '-ms-transform':'translateX(100px)',
            '-o-transform':'translateX(100px)',
            '-moz-transform':'translateX(100px)',
            'transform':'translateX(100px)'
        }).addClass('active');
    } else {
        usrObj.css({
            '-webkit-transform':'translateX(0)',
            '-ms-transform':'translateX(0)',
            '-o-transform':'translateX(0)',
            '-moz-transform':'translateX(0)',
            'transform':'translateX(0)'
        }).removeClass('active');
    }
});