JSFiddle - React, Tailwind, and code Playground

by Ayyappan Sakthivadivel

HTML

<div class="anim-object flip-2-hor-top-1 active" id="card-object-hf" >
  <div class="front face"><div class="text">A</div></div>
  <div class="back face"><div class="text">B</div></div>
</div>

CSS

#card-object-df1 .front, #card-object-df2 .front, #card-object-hf .front, #card-object-vf .front {
    background: #2dccb8;
    z-index: 20;
}
#card-object-df1 .face, #card-object-df2 .face, #card-object-hf .face, #card-object-vf .face {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden;
    border-radius: 10px;
    text-align: center;
}
#card-object-df1 .back, #card-object-df2 .back, #card-object-hf .back, #card-object-vf .back {
    background: #53a3dc;
    z-index: 10;
}
#card-object-df1 .face, #card-object-df2 .face, #card-object-hf .face, #card-object-vf .face {
    position: absolute;
    width: 100%;
    height: 100%;
    /* -webkit-backface-visibility: hidden; */
    /* backface-visibility: hidden; */
    border-radius: 10px;
    text-align: center;
}
#card-object-df1 .face .text, #card-object-df2 .face .text, #card-object-hf .face .text, #card-object-vf .face .text {
    color: #fff;
    font-family: 'TeXGyreAdventorRegular';
    font-size: 68px;
    line-height: 170px;
    text-align: center;
    display: inline;
}

.flip-2-hor-top-1 {
	-webkit-animation: flip-2-hor-top-1 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
	        animation: flip-2-hor-top-1 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2019-10-16 16:1:18
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation flip-2-hor-top-1
 * ----------------------------------------
 */
@-webkit-keyframes flip-2-hor-top-1 {
  0% {
    -webkit-transform: translateY(0) rotateX(0);
            transform: translateY(0) rotateX(0);
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
  }
  100% {
    -webkit-transform:...