JSFiddle - React, Tailwind, and code Playground

by Vaibhav Deshwal

HTML

<button id="translate-this">Translate</button>
<div class="container">
    <div class="absolute"></div>
</div>

CSS

.container {
    width: 200px;
    height: 100px;
    background-color: #ecf0f1;
    position: relative;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.absolute {
    position: absolute;
    width: 20px;
    height: 10px;
    top: 50px;
    left: 50px;
    background-color: #16a085;
}
.translater {
    -moz-transform: translateX(200px) translateY(300px);
    -webkit-transform: translateX(200px) translateY(300px);
    -o-transform: translateX(200px) translateY(300px);
    -ms-transform: translateX(200px) translateY(300px);
    transform: translateX(200px) translateY(300px);
}

JavaScript

$('#translate-this').on('click', function () {
    $('.container').toggleClass('translater');
});