JSFiddle - React, Tailwind, and code Playground

HTML

<div id="cover" class="cover">

</div>
<div id="main" class="main">
 Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />
 Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />
 Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />
 Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />
 Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />
 Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />
 Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />
</div>

CSS

.cover {
  position: fixed;
  top: 20px;
  bottom: 20px;
  left: 20px;
  width: calc(100% - 40px);
  background-color: red;
}

.flipOutRight {
	transform-origin: 50% 50%;
	animation: flipOutRight .3s both ease-in;
  background-color: blue;
}

@keyframes slideOut {
  from {
    left: 0;
  }

  to {
    left: -100%;
  }
}

@keyframes flipOutRight {
	from { }
	to { transform: rotateY(90deg); opacity: 0; }
}

JavaScript

var cover = document.getElementById('cover');

cover.addEventListener('click', function () {
	this.classList.add('flipOutRight');
});