JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script>	
<script type="text/javascript">
function in_fn(){	
document.getElementById("test").style.transform = "translate3d(0, 0, 0)";
document.getElementById("test").style.-webkit-transform = "translate3d(0, 0, 0)";
document.getElementById("test").style.-moz-transform = "translate3d(0, 0, 0)";
document.getElementById("test").style.-o-transform = "translate3d(0, 0, 0)";
document.getElementById("test").style.-ms-transform = "translate3d(0, 0, 0)";
document.getElementById("menu-button").setAttribute("onclick", "out_fn()");
}
function out_fn(){
document.getElementById("test").style.transform = "translate3d(-239px, 0, 0)";
document.getElementById("test").style.-webkit-transform = "translate3d(-239px, 0, 0)";
document.getElementById("test").style.-moz-transform = "translate3d(-239px, 0, 0)";
document.getElementById("test").style.-o-transform = "translate3d(-239px, 0, 0)";
document.getElementById("test").style.-ms-transform = "translate3d(-239px, 0, 0)";
document.getElementById("menu-button").setAttribute("onclick", "in_fn()");
}
</script>

		<div id="test" style="
				 	width: 200px;
				    height: 200px;
    				background: #000;
    				transform: translate3d(-239px, 0px, 0px);
    				-webkit-transform: translate3d(-239px, 0px, 0px);">
		</div>
		
		
		<div id="menu-button" onclick="in_fn()">CLIKC HERE</div>