JSFiddle - React, Tailwind, and code Playground

HTML

<div id="rect">
Move me on click
</div>

CSS

#rect {
  width: 200px;
  height: 200px;
  border: 1px solid;
}

JavaScript

function animate(elm, milliseconds, distance) {
  const { x } = elm.getBoundingClientRect()
  elm.animate([
    { transform: `translateX(${x}px)` },
    { transform: `translateX(${x + distance}px)` }
  ], {
    duration: milliseconds,
    fill: 'forwards'
  })
}

var elm = document.getElementById('rect')
elm.addEventListener('click', () => {
  animate(elm, 1000, 200)
})