JSFiddle - React, Tailwind, and code Playground

HTML

<div class="card effect__click">
    <div class="card__front"> <span class="card__text">front</span>

    </div>
    <div class="card__back"> <span class="card__text">back</span>

    </div>
</div>
<!-- /card -->

CSS

.card {
    position: relative;
    float: left;
    padding-bottom: 25%;
    width: 25%;
    text-align: center;
}
.card__front, .card__back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.card__front, .card__back {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
}
.card__front {
    background-color: #ff5078;
}
.card__back {
    background-color: #1e1e1e;
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}
.card.effect__click.flipped .card__front {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}
.card.effect__click.flipped .card__back {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
}

JavaScript

(function () {
    var cards = document.querySelectorAll(".card.effect__click");
    for (var i = 0, len = cards.length; i < len; i++) {
        var card = cards[i];
        clickListener(card);
    }

    function clickListener(card) {
        card.addEventListener("click", function () {
            var c = this.classList;
            c.contains("flipped") === true ? c.remove("flipped") : c.add("flipped");
        });
    }
})();