JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<div class="parent">
<div class="click-me animate show">
<div>one line</div>
</div>
</div>
CSS
.parent {
background: #FFF;
}
.hide {
transform: translateY(-100%);
z-index: -20;
}
.show {
transform: translateX(0);
z-index: 1;
}
.animate {
transition: transform 1s;
}
JavaScript
$('.click-me').on('click', function() {
var $this = $(this);
if ($this.hasClass('show')) {
$(this).removeClass('show').addClass('hide');
}
});