JSFiddle - React, Tailwind, and code Playground

by anothernick

HTML

<div class='card'>
    <div class='front face'>
        <p style="text-align: center; margin-top:40%;">
            Front
        </p>
    </div>
    <div class='front-back face'>
        <div class="flip180">
            <img src="http://placekitten.com/200/300" class="img-responsive"/>
        </div>
    </div>
    <div class="back face">
        <p style="text-align: center; margin-top:40%;">
            Inner Back
        </p>
    </div>
    <div class="back-back face">
        <div class="flip180">
            <img src="http://placekitten.com/200/300" class="img-responsive"/>
        </div>
    </div>
</div>

CSS

.card {
    width: 200px;
    height: 300px;
    position: relative;
    -webkit-perspective: 700;
    margin: 30px auto;
    cursor: pointer;
    border-left: 1px solid #F5F5F5;

    /*don't highlight text*/
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.card:before {
    /*content: 'Mouse down for detail ⤏';*/
    position: absolute;
    width: 200px;
    height: 300px;
    line-height: 300px;
    text-align: center;
    top: 0;
    left: -180px;
    color: #222;
}

/*each page*/
.face {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: visible;
    -webkit-transition: all 0.5s ease-out;
    -webkit-transform-origin: 0 0;
}

/*flip content of back pages.../*/
.flip180{
    -webkit-transform: rotateY(180deg);
}

/*front page*/
.front {
    box-shadow: 0 0 1px #888;
    background-color: #EFEFEF;
    -webkit-transform: rotateY(-20deg);
    z-index: 4;
}
/*back of front page*/
.front-back{
    background-color: #00FF00;
    -webkit-transform: rotateY(-20deg);
    z-index: 3;
}
/*back page*/
.back {
    background-color: #EFEFEF;
    box-shadow: 0 0 1px #888;
    -webkit-transform: rotateY(0deg);
    z-index: 2;
}
/*back of back page*/
.back-back{
    background-color: #00FF00;
    -webkit-transform: rotateY(0deg);
    z-index: 1;
}

/*CARD HOVER*/
.card:hover .front {
    -webkit-transform: rotateY(-35deg);
}
.card:hover .front-back {
    -webkit-transform: rotateY(-35deg);
}
.card:hover .face {
    -webkit-transition: all 0.3s ease-out;
}

/*CLOSED HOVER*/
.closed:hover .front{
    -webkit-transform: rotateY(-180deg);
}
.closed:hover .front-back {
    -webkit-transform: rotateY(-180deg);
}
.closed:hover .back {
    -webkit-transform: rotateY(-145deg);
}
.closed:hover .back-back {
    -webkit-transform: rotateY(-145deg);
}

/*CLOSED*/
.closed .front{
    -webkit-transform:...

JavaScript

$(".card").click(function(){
    var ths = $(this);
    if(!ths.hasClass("open") && !ths.hasClass("closed")){
        ths.addClass("open");
    }
    else{
        ths.removeClass("open");
        if(!ths.hasClass("closed")){
            ths.addClass("closed");
        }
        else{
            ths.removeClass("closed"); 
        }
    }
    
});