JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sf-container">
    <div class="sf-page in" id="content-container">
        <button type="button">Click Me</button>
    </div>
    <div class="sf-drawer">
    </div>
</div>

CSS

.sf-container {
    position: absolute !important;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
	overflow: hidden;
}

.sf-drawer {
	position: absolute !important;
	top: 0;
	bottom: 0;
	left: 0;
	width: 240px !important;
	background: rgb(35,37,40);
}

.sf-page {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
    width: 100% !important;
    height: 100% !important;
    position: absolute;
	z-index: 10;
    background: tomato;
}

    .sf-page {
        -webkit-animation-duration: .4s;
           -moz-animation-duration: .4s;
            -ms-animation-duration: .4s;
             -o-animation-duration: .4s;
                animation-duration: .4s;
    
        -webkit-transition-timing-function: ease-out;
           -moz-transition-timing-function: ease-out;
            -ms-transition-timing-function: ease-out;
             -o-transition-timing-function: ease-out;
                transition-timing-function: ease-out;
    }
    
    .sf-page.out {
        -webkit-animation-name: sf-slideout;
           -moz-animation-name: sf-slideout;
            -ms-animation-name: sf-slideout;
             -o-animation-name: sf-slideout;
                animation-name: sf-slideout;
    
        -webkit-transform: translateX(240px);
           -moz-transform: translateX(240px);
             -o-transform: translateX(240px);
                transform: translateX(240px);
    }

.sf-page.in {
	-webkit-animation-name: sf-slidein;
	   -moz-animation-name: sf-slidein;
	    -ms-animation-name: sf-slidein;
	     -o-animation-name: sf-slidein;
	        animation-name: sf-slidein;
	
	-webkit-transform: translate3d(0, 0, 0);
	   -moz-transform: translate3d(0, 0, 0);
	    -ms-transform: translate3d(0, 0, 0);
	     -o-transform: translate3d(0, 0, 0);
	     	transform: translate3d(0, 0, 0);
}

    @-webkit-keyframes sf-slideout {
        from { -webkit-transform: translate3d(0, 0, 0);	}
        to { -webkit-transform: translate3d(240px, 0, 0); }
    }
     
    @-webkit-keyframes sf-slidein {
 ...

JavaScript

$("#content-container").click(function(){
    $("#content-container").toggleClass("out");
    $("#content-container").toggleClass("in");
});