JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box-container">
    <div class="box">
        <div class="front"></div>
        <div class="back"></div>
    </div>
    <div class="box">
        <div class="front"></div>
        <div class="back"></div>
    </div>
    <div class="box">
        <div class="front"></div>
        <div class="back"></div>
    </div>
    <div class="box">
        <div class="front"></div>
        <div class="back"></div>
    </div>
</div>

SCSS

* {
    box-sizing: border-box;
}

.box-container {
    padding: 20px;
    &:after {
        content: '';
        display: block;
        clear: both;
    }
    .box {
        float: left;
        width: 50%;
        height: 200px;
        position: relative;
        perspective: 1000px;
        border: 1px solid transparent;
        .front,
        .back {
            float: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            backface-visibility: hidden;
            transition: all .4s ease-in-out;
        }
        .front {
            background: blue;
            transform: rotateX(0) rotateY(0);
            z-index: 900;
        }
        .back {
            background: red;
            z-index: 800;
			 transform: rotateX(-179deg);
        }
		&:hover {
			// Front hover
			.front {z-index: 900; transform: rotateX(179deg);}

			// Back hover
			.back {z-index: 1000; transform: rotateX(0) rotateY(0);}
		}
    }
}