JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<button>toggle</button>

<div>
</div>

CSS

div {
  min-height: 300px;
  width: 25%;
  background-color: red;
}

JavaScript

var block = document.querySelector("div");
var active;

document.querySelector("button").addEventListener("click", function() {
	active = !active;
  if (active) {
  	block.style.transition = "20s transform";
    block.style.transform = "translateX(400px)";
  }
  else {
  	block.style.transition = "";
    var value = window.getComputedStyle(block).transform;
    block.style.transform = value;
  }
});