JSFiddle - React, Tailwind, and code Playground

by pixeloco

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/2.1.0/es5-shim.min.js"></script>
<div class="box">
	<div class="top">im one box</div>
</div>

<div class="box">
	<div class="top">im another box</div>
</div>

CSS

.box {
height:300px; width:200px;
margin:30px auto;
background-color:purple;
overflow:hidden;
}

.top {
   position: relative;
   background-color:pink;
   width:200px; height:100px;
   -webkit-transform: translate(-200px, 100px); -moz-transform: translate(-200px, 10px); -o-transform: translate(-200px, 100px); -ms-transform: translate(-200px, 100px); transform: translate(-200px, 100px);
   -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -o-transition: all .5s ease-out; -ms-transition: all .5s ease-out; transition: all .5s ease-out;  
}

.animate {
   -webkit-transform: translate(0px,0px); -moz-transform: translate(0px,0px); -o-transform: translate(0px,0px); -ms-transform:translate(0px,0px); transform: translate(0px,0px);
}

JavaScript

$(".box").click(function() {
    $(".top").toggleClass("animate");
});