JSFiddle - React, Tailwind, and code Playground

CSS

.flipper {
  height: 10em;
  margin:  4em auto;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s ease-out;
  width: 10em;
}

.front, .back {
  backface-visibility: hidden;
  color: white;
  height: inherit;
  position: absolute;
  text-align: center;
  width: inherit;
}

.front {
  background: darkgreen;
  z-index: 2;
}

.back {
  background: darkblue;  
}

JavaScript

$('body').html('<div class="card-container"><div id = "myDiv" class="flipper"><div class="front"> <h1>Hello</h1></div><div id="backDiv" class="back"> <h1>World</h1></div></div></div>');



                document.getElementById("myDiv").style.transform = "rotateX(360deg)"
                document.getElementById("myDiv").style.WebkitTransform = "rotateX(360deg)"
                document.getElementById("myDiv").style.msTransform = "rotateX(360deg)";
                document.getElementById("myDiv").style.transition = 'transform 6s ease-out'

                document.getElementById("backDiv").style.transform =  'rotateX(180deg)';