JSFiddle - React, Tailwind, and code Playground

HTML

<div class="card-rotate">
  <div class="card-rotate_container" id="container">

    <div class="card-rotate-item card-rotate_front">
      <div class="circle"></div>
    </div>

    <div class="card-rotate-item card-rotate_back">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, rem, quod! Numquam ea sint sed adipisci nemo ipsum mollitia consequuntur debitis ullam impedit voluptate corporis, animi neque id odit eaque.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, rem, quod! Numquam ea sint sed adipisci nemo ipsum mollitia consequuntur debitis ullam impedit voluptate corporis, animi neque id odit eaque.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, rem, quod! Numquam ea sint sed adipisci nemo ipsum mollitia consequuntur debitis ullam impedit voluptate corporis, animi neque id odit eaque.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, rem, quod! Numquam ea sint sed adipisci nemo ipsum mollitia consequuntur debitis ullam impedit voluptate corporis, animi neque id odit eaque.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, rem, quod! Numquam ea sint sed adipisci nemo ipsum mollitia consequuntur debitis ullam impedit voluptate corporis, animi neque id odit eaque.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, rem, quod! Numquam ea sint sed adipisci nemo ipsum mollitia consequuntur debitis ullam impedit voluptate corporis, animi neque id odit eaque.</p>
    </div>
    
  </div>
</div>
  
  <a href="#" id="button" class="button">
    Rotate
  </a>

CSS

html,
body{
  width: 100%;
  height: 100%;
}
*{
  margin: 0;
  padding: 0;
}

.card-rotate {
	position: relative;
	width: 50%;
	height: 50%;
  margin: 0 auto;
  margin-top: 10vh;
  margin-bottom: 15vh;
	perspective: 1000px;
}

.card-rotate_container {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	transition: transform 0.5s;
	transform-style: preserve-3d;
}


.card-rotate-item{
	width: 100%;
	height: 100%;
	position: absolute;
	display: block;
	backface-visibility: hidden;
  padding: 10px;
  color: #111;
  box-shadow: 5px 5px 20px rgba(0,0,0,.5);
}
.card-rotate_front {
	background: #fff;
}
.card-rotate_back {
	background: #1A237E;
	overflow-x: hidden;
	overflow-y: scroll;
	transform: rotateY( 180deg );
  color: #fff;
}

.cardRotete {	
	transform: rotateY( 180deg );
}

.button{
  display: block;
  width: 40px;
  height: 20px;
  background: #000;
  color: #fff;
  margin: 0 auto;
  padding: 10px 20px;
  text-decoration: none;
}

.circle{
  position: absolute;
  width: 80px;
  height: 80px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: red;
  -webkit-border-fit: repeat;
  border-radius: 50%;
}

JavaScript

var button = document.getElementById('button');
var container = document.getElementById('container');

button.addEventListener('click', function(){
	container.classList.toggle('cardRotete');
});