JSFiddle - React, Tailwind, and code Playground
HTML
<div class="parent">
<div class="child"></div>
</div>
<a href="#" id="button">Move parent</a>
CSS
.parent {
background: red;
height: 200px;
position: relative;
transition: 0.5s ease-in-out;
width: 200px;
}
.child {
background: black;
height: 100px;
left: 0;
top: 0;
position: absolute;
width: 100px;
}
.moved {
transform: translateX(100px);
}
JavaScript
$('#button').on('click', function(e) {
e.preventDefault();
console.log('test');
$('.parent').toggleClass('moved');
});