JSFiddle - React, Tailwind, and code Playground

HTML

<div class="col4 box disabled rectangle flip">
    <div class='card'>
        <div class='front face' style='background-color: red'>
            <div class='front-inner'>
                <div class='flip-button'>Flip</div>
                <div class="tile-title">
                    Title
                </div>
            </div>
        </div>
        <div class='back face'>
            <div class="close">Close</div>
            This is the back
        </div>
    </div>
</div>

CSS

* {
    box-sizing: border-box;
}
body {
    overflow-x: hidden;
}
.box {
    color: #fff;
    text-align: center;
}
.box.flip {
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -ms-perspective: 800px;
    -o-perspective: 800px;
    perspective: 800px;
    position: relative;
}
.box.flip .card {
    transform-style: preserve-3d;
    transition: 1.2s;
    background-size: cover;
    height: 100%;
    width: 100%}
.box.flip .card.flipped {
    transform: transform: rotateX(180deg) translateZ(0);
    transform-origin: center, left;
}
.box.flip .card .face {
    backface-visibility: hidden;
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 2;
}
.box.flip .card .front {
    background-size: cover;
    position: absolute;
    z-index: 1;
}
.box.flip .card .front .front-inner {
    height: 100%;
    padding-top: 105px;
}
.box.flip .card .front .flip-button {
    background-size: cover;
    cursor: pointer;
    height: 15px;
    position: absolute;
    left: 15px;
    top: 15px;
    width: 14px;
}
.box.flip .card .back {
    -webkit-transform: rotatey(-180deg);
    -moz-transform: rotatey(-180deg);
    -ms-transform: rotatey(-180deg);
    -o-transform: rotatey(-180deg);
    transform: rotatey(-180deg);
    background-color: #000;
    color: #fff;
    position: relative;
}
.box.flip .card .back .close {
    cursor: pointer;
    font-size: 14px;
    height: 25px;
    padding-top: 3px;
    position: absolute;
    left: 10px;
    text-align: center;
    top: 10px;
    width: 25px;
}
.box.rectangle {
    height: 360px;
    margin-bottom: 12px;
}

.box .tile-title {
    font-family: "PlayfairDisplay-Regular";
    font-size: 28px;
    margin-bottom: 15px;
}

JavaScript

$(".flip .flip-button").on("click", function() {
    $(this).closest(".card").addClass("flipped");
});
$(".flip .close").on("click", function() {
    $(this).closest(".card").removeClass("flipped");
});