JSFiddle - React, Tailwind, and code Playground

by bnookala

HTML

<!doctype html>
<html>
    <body>
        <div id="container">
            <div id="card">
                <div class="face front">
                    Hello World!
                </div>
                <div class="face back">
                    <input type="text"/>
                </div>
            </div>
        </div>
    </body>
</html>

CSS

#container{
    height: 400px;
    width: 600px;
    position: relative;
    margin: auto;
    margin-top: 12%;

    -webkit-perspective: 800;
    -moz-perspective: 800;
    -ms-perspective: 800;
    -o-perspective: 800;
    perspective: 800;
}

#card {
    margin: auto;
    height: 100%;
    width: 100%;

    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -ms-transition: -ms-transform 1s;
    -o-transition: -o-transform 1s;
    transition: transform 1s;

    -webkit-transform-style: perserve-3d;
    -moz-transform-style: perserve-3d;
    -ms-transform-style: perserve-3d;
    -o-transform-style: perserve-3d;
    transform-style: perserve-3d;

    -webkit-transform-origin: right center;
    -moz-transform-origin: right center;
    -ms-transform-origin: right center;
    -o-transform-origin: right center;
    transform-origin: right center;
}

#card.flip {
    -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 .face {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;

    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.95);
    -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.95);
    -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.95);
    
     border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}

#card .front {
    background-color: red;
}

#card .back {
    background-color: blue;

    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -ms-transform: rotateY( 180deg );
    -o-transform: rotateY( 180deg );
   ...

JavaScript

$(".face.front").bind('click', function () {
        $("#card").addClass('flip');
    });

    $(".face.back").bind('click', function () {
        $("#card").removeClass('flip');
    });