JSFiddle - React, Tailwind, and code Playground

by Sahil Kashyap

HTML

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

CSS

.card {
	position:relative;
	width:250px;
	height:250px;
	margin:auto;
	-webkit-perspective:1000;
}

.front, .back {
	position:absolute;
	width:100%;
	height:100%;
	-webkit-backface-visibility:hidden;
    transition:0.5s;
    transform-style:preserve-3d;
}

.front { background-color:red; }

.back { background-color:blue;
        -webkit-transform:rotateY(180deg); }

.card:hover .front {
	-webkit-transform:rotateY(-180deg);
}

.card:hover .back {
	-webkit-transform:rotateY(0deg);
}