JSFiddle - React, Tailwind, and code Playground

HTML

<div id="card" class="card">

    <div class="front">
        <h3> Front </h3>
    </div>
    
    <div class="back">
          <h3> Back </h3>
    </div>
    
</div>

CSS

.card {
    height: 280px;
    width: 225px;
    margin: 10px 10px 20px 10px;
    position: relative;
    cursor: pointer;
    -webkit-perspective: 300px;
    perspective: 300px;
}

.card .front {
    z-index: 900;
    background: #fff;
}

.card .back {
    z-index: 900;
    background: #fff;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
}

.card .front, .card .back {
float: none;
position: absolute;
top: 0;
left: 0;
width: inherit;
height: inherit;
border: 1px solid #dddddd;
padding: 1px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
    
-webkit-transition-duration: 3s, 1s;
-moz-transition-duration: 3s, 1s;
-ms-transition-duration: 3s, 1s;
-o-transition-duration: 3s, 1s;
transition-duration: 3s, 1s;

}



/* flip */

.card.flip .front {
    z-index: 900;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg); 
}

.card.flip .back {
    z-index: 1000;
    -webkit-transform: rotateY(360deg);
    -moz-transform: rotateY(360deg);
    -ms-transform: rotateY(360deg);
    -o-transform: rotateY(360deg);
    transform: rotateY(360deg);
}

JavaScript

document.getElementById("card").addEventListener("click",function(e){
    if(this.className.search("flip") === -1)
        this.className = this.className + " flip";
    else
        this.className = "card";    

});