JSFiddle - React, Tailwind, and code Playground

by Zeaklous

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;
    -webkit-perspective:1000;
}

.card {
    width: 200px;
    height: 100px;
    position: relative;
    display: inline-block;
    margin: 10px;
    -webkit-transition: 1s ease-in;
    -webkit-transform-style: preserve-3d;
    -webkit-transform:translateZ(1px);
}

.card .frontpage, .card .rearpage, img {
    width: 100%;
    height: 100%;
    position: absolute;
    top:0; 
    left:0;
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
}

.card img {
    width: 100%;
    height: 100%;
}

.card .rearpage,
.card.opened {
    -webkit-transform:rotateY(180deg);
}

JavaScript

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

/*
var cards = document.getElementsByClassName("card");

cards.forEach(function(card) {
    card.onclick = function() {
        this.classList.toggle("opened");
    };
});
*/