JSFiddle - React, Tailwind, and code Playground

by Hoang Minh Vu

HTML

<body>
	<div id="container" style="background:pink;height:500px;">
	<div id="outer-wrapper" class="is-open" style="background:blue;height:500px;">
			<div id="inner-wrapper" style="background:red;height:300px;">
			</div>
			<div id="sidebar" style="background:green;height:300px;">
			</div>
		</div>
	</div>
</body>

CSS

#sidebar {
	height: 100%;
	position: absolute;
	top: 0;
	left: -80%;
	width: 80%;
}

.is-open {
    //expose the sidebar by translating the wrapper to the right
	-webkit-transform: translateX(80%);
	transform: translateX(80%);
}

#container {
    //disables horizontal scroll
	overflow: hidden;
}
#outer-wrapper {
}