JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<div class="card">
    <div class="front">FRONT</div>
    <div class="back">BACK</div>
</div>

CSS

.card {
    width: 100px;
    height: 100px;
    position: relative;
    margin: 2em auto;
    -webkit-perspective: 200px;
    perspective: 200px;
}
.card .front, .card .back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    text-align: center;
    background: #abc;
    border: 1px solid #789;
    font: 150%/100px sans-serif;
    
    transition: all .4s ease-in-out;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
}
.card .front {
    z-index: 1;
    
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
.card .back {
    -webkit-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

.card:hover .front {
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.card:hover .back {
    z-index: 2;
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
}