JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.hoverArea, .flip, .front, .back {
		width: 200px;
		height: 200px;
		position: absolute;
		top: 0;
		left: 0;
	}
	.hoverArea {
		z-index: 10;
	}
	.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 ;
	}
	.hoverArea:hover + .flip {
		-webkit-transform: rotatex(-180deg);	
	}