JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<div id="one"></div>
<div id="two"></div>

CSS

html, body {
  margin: 0;
  padding: 0;
}

div {
  height: 100vh;
  width: 100vw;
  transform-origin: 0 50%;
  position: absolute;
  top: 0;
  left: 0;
  transition-property: transform;
  transition-duration: 1s;
}

#one {
  background: red;
}
#two {
  background: green;
}

.flip {
  transform: rotateY(90deg);
}

JavaScript

two.addEventListener("click", function() {
	this.classList.add("flip");
});