JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container" aria-haspopup="true">    
    <div class="front">
        front side
    </div>
    <div class="back">
        back side
    </div>
    
</div>

CSS

#container {
    position: relative;
    height:362px;
    width: 282px;
    margin: 50px auto;
    perspective:800px;
    
}
#container div {
    position:absolute;
    left:0;
    top:0;
    width:242px;
    height: 322px;
    padding:20px;
    background:#463;
    -ms-border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -webkit-transition: 1.5s ease-in-out;
    -moz-transition: 1.5s ease-in-out;
    -ms-transition: 1.5s ease-in-out;
    -o-transition: 1.5s ease-in-out;
    transition: 1.5s ease-in-out;
}
#container div.back{
    background-color:#aaf;    
    z-index:5;
    top:0px;
    transform:rotateY(180deg);
    backface-visibility:hidden;
}
#container:hover div.back {
    -webkit-transform: perspective(800px) rotateY(180deg);
    -moz-transform: perspective(800px) rotateY(180deg);
    transform: rotateY(360deg);
}
#container:hover div.front {
    -webkit-transform: perspective(800px) rotateY(180deg);
    -moz-transform: perspective(800px) rotateY(180deg);
    transform: rotateY(180deg);
}