JSFiddle - React, Tailwind, and code Playground

HTML

<body>
        <div class="cards">
            <div class="card">
                <div class="frontpage">
                    <img src="http://lorempixel.com/400/200/"/>
                </div>
                <div class="rearpage">
                    <img src="http://lorempixel.com/g/400/200/"/>
                </div>
            </div>

            <div class="card">
                <div class="frontpage">
                    <img src="http://lorempixel.com/400/200/"/>
                </div>
                <div class="rearpage">
                    <img src="http://lorempixel.com/g/400/200/"/>
                </div>
            </div>

            <div class="card">
                <div class="frontpage">
                    <img src="http://lorempixel.com/400/200/"/>
                </div>
                <div class="rearpage">
                    <img src="http://lorempixel.com/g/400/200/"/>
                </div>
            </div>

            <div class="card">
                <div class="frontpage">
                    <img src="http://lorempixel.com/400/200/"/>
                </div>
                <div class="rearpage">
                    <img src="http://lorempixel.com/g/400/200/"/>
                </div>
            </div>

            <div class="card">
                <div class="frontpage">
                    <img src="http://lorempixel.com/400/200/"/>
                </div>
                <div class="rearpage">
                    <img src="http://lorempixel.com/g/400/200/"/>
                </div>
            </div>

            <div class="card">
                <div class="frontpage">
                    <img src="http://lorempixel.com/400/200/"/>
                </div>
                <div class="rearpage">
                    <img src="http://lorempixel.com/g/400/200/"/>
                </div>
            </div>

            <div class="card">
                <div class="frontpage">
                    <img...

CSS

.cards {
    width: 800px;
    margin: auto;
}

.card {
    width: 200px;
    height: 100px;
    position: relative;
    display: inline-block;
    margin: 10px;
}

.card .frontpage, .card .rearpage {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
}


.card .rearpage {
    width: 0%;
}

.card .frontpage img, .card .rearpage img {
    width: 100%;
    height: 100%;
}


/***** ANIMATIONS *****/

/* ANIMATION 1 */
.card .frontpage {
    -webkit-animation-duration: 1s;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-fill-mode: forwards;
}

.card.opened .frontpage {
    -webkit-animation-name: frontToRear;
}

@-webkit-keyframes frontToRear {
    0% { width: 100%; }
    50% { width: 0%; margin-left: 50%; }
    100% { width: 0%; }
}

/* ANIMATION 2 */
.card .rearpage {
    -webkit-animation-duration: 1s;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-fill-mode: forwards;
}

.card.opened .rearpage {
    -webkit-animation-name: rearToFront;
}

@-webkit-keyframes rearToFront {
    0% { width: 0%; }
    50% { width: 0%; margin-left: 50%; }
    100% { width: 100%; }
}

JavaScript

$('.card').click(function(){
    $(this).toggleClass('opened');
});