JSFiddle - React, Tailwind, and code Playground
HTML
<p>Click on the box to animate it</p>
<div class="box"></div>
CSS
html {
background: #f2f2f2;
}
p {
font-family: "helvetica", Arial, sans-serif;
text-align: center;
}
.box {
width: 100px;
height: 100px;
background: #fff;
box-shadow: 0 10px 20px rgba(0,0,0,0.5);
transform: translate(0, 0);
transition: transform 500ms;
will-change: transform;
}
.box.move {
transform: translate(100px, 100px);
}
JavaScript
var box = document.querySelector('.box');
box.addEventListener('click', function () {
box.classList.toggle('move');
}, false);