JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sf-container">
    <div class="sf-page" 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-transition: -webkit-transform .2s ease-out;
	   -moz-transition: -moz-transform .2s ease-out;
			transition: transform .2s ease-out;
}

.sf-page.out {
	-webkit-transform: translateX(240px);
	   -moz-transform: translateX(240px);
			transform: translateX(240px);
}

JavaScript

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