JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.flip, .front, .back {
	    width: 200px;
	    height: 200px;
	    position: absolute;
	    top: 0;
	    left: 0;
	}
	.flip {
	    -webkit-transform-style: preserve-3d;
	    -webkit-transition: 0.5s;
	    -webkit-perspective: 800;
	    z-index: 9;
	}
	.front {
	    background-color: #f00;
	    -webkit-backface-visibility: hidden;
	}
	.back {
	    background-color: #f0f;
	    -webkit-transform: rotatex(-180deg);
	    -webkit-backface-visibility: hidden;
	}
	.flip:hover {
	    -webkit-transform: rotatex(-180deg);
	}