JSFiddle - React, Tailwind, and code Playground

by Trung Đinh Quang

HTML

<div id="box">
</div>

CSS

#box {
  left: 0;
  top: 0;
  transition: transform 0.5s;
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: gray;
  transform: translate3d(0, 0, 0);
}

#box.active {
  transform: translate3d(100px, 100px, 0);
}

Babel + JSX

setInterval(() => {
	if (box.classList.contains('active')) {
	  box.classList.remove('active');
  } else {
    box.classList.add('active');
  }
}, 1000)