JSFiddle - React, Tailwind, and code Playground

by qayxswedcvfr

HTML

<div id="card">
    <figure class="front">
        <p class="description">FRONT</p>
    </figure>
    <figure class="back">
        <div>
            <img width="150"...

CSS

#card {
            background: #F5F6F8;
            border: 2px solid #DFE1E0;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            margin: 0 auto;
            max-width: 100%;
            min-height: 30em;
            padding-top: 2em;
            padding-bottom: 2em;
            position: relative;
            text-align: center;
            -webkit-transition: transform .5s;
            -moz-transition: transform .5s;
            -o-transition: transform .5s;
            transition: transform .5s;
            -webkit-transform-origin: right center;
            -moz-transform-origin: right center;
            -ms-transform-origin: right center;
            -o-transform-origin: right center;
            transform-origin: right center;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            width: 35em;
        }

            #card.flipped {
                -webkit-transform: translateX( -100% ) rotateY( -180deg );
                -moz-transform: translateX( -100% ) rotateY( -180deg );
                -ms-transform: translateX( -100% ) rotateY( -180deg );
                -o-transform: translateX( -100% ) rotateY( -180deg );
                transform: translateX( -100% ) rotateY( -180deg );
            }

            #card figure {
                margin: 0;
                display: block;
                height: 100%;
                width: 100%;
                color: rgba(0,0,0,0.6);
                position: relative;
            }           

            #card .back {    
                display: block;
                -webkit-transform: rotateY( 180deg );
                -moz-transform: rotateY( 180deg );
                -ms-transform: rotateY( 180deg );
                -o-transform: rotateY( 180deg );
                transform: rotateY( 180deg );
            }

            #card.flipped .back {
                display: block;
    ...

JavaScript

var card = document.getElementById("card");
var className = " " + card.className + " ";
if (~className.indexOf(" flipped ")) {
    card.className = className.replace(" flipped ", " ");
} else {
    card.className += " flipped";
}