JSFiddle - React, Tailwind, and code Playground
HTML
<div id="foo">
<div id="poop"></div>
</div>
<div id="button">Click me</div>
CSS
#foo{
width:100%;
height:200px;
border:1px solid black;
position:relative;
}
#poop{
width:100px;
height:100px;
background-color:green;
position:absolute;
right:50%;
top:50%;
-webkit-transition: all 1s;
transform:translate3d(0,0,0) scale(0.25);
-webkit-transform:translate3d(0,0,0) scale(0.25);
}
#foo .blah{
transform:translate3d(-100%,-100%,0) scale(1);
-webkit-transform:translate3d(-100%,-100%,0) scale(1);
}
#button{
width:100px;
height:25px;
background-color:red;
}
JavaScript
$("#button").click(function(){$("#poop").toggleClass("blah")});