JSFiddle - React, Tailwind, and code Playground

HTML

<div id="target_area"></div>
<input type="button" value="flip all" id="flip_all" />

CSS

#target_area .face {
        -webkit-backface-visibility: hidden;
        position: absolute;
    }

    #target_area .face img {
        vertical-align: middle;
        height: 100%;
    }

    #target_area .face.back {
        -webkit-transform: rotateY(180deg);
    }

    #target_area .card {
        float: left;
        margin-left: 5px;

        -webkit-transform-style: preserve-3d;
        -webkit-transition-property: all;
        -webkit-transition-duration: 1s;
        -webkit-transition-timing-function: ease-in;
    }

    #target_area .card.origshown {
        -webkit-transition-property: none;
        visibility: hidden;
    }

    #target_area .card.origflipped {
        -webkit-transform: rotateY(180deg);
    }

    #target_area .card.clone {
        float: none;
        -webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5);
    }

    #target_area .card.clone.activated {
        -webkit-transform: rotateY(180deg);
    }

    #target_area .card.clone.origflipped {
        -webkit-transform: rotateY(180deg);

    }

    #target_area .card.clone.origflipped.activated {
        -webkit-transform: rotateY(0deg);
    }

JavaScript

$(document).ready(function () {

    var ALL_CARDS = [
        ['http://twitpic.com/show/thumb/26n3ms', 'http://twitpic.com/show/thumb/26n3mr'],
        ['http://twitpic.com/show/thumb/26n3ma', 'http://twitpic.com/show/thumb/26n3mq'],
        ['http://twitpic.com/show/thumb/26n3mb', 'http://twitpic.com/show/thumb/26n3mt'],
        ['http://twitpic.com/show/thumb/26n3mc', 'http://twitpic.com/show/thumb/26n3mu'],
        ['http://twitpic.com/show/thumb/26n3md', 'http://twitpic.com/show/thumb/26n3mv'],
    ];

    var width = 100;

    for (var i = 0; i < ALL_CARDS.length; i++) {

        $(document.createElement('div'))
            .addClass("card")
            .append(
                $('<img src="' + ALL_CARDS[i][0] + '" />')
                    .addClass("face front")
                )
            .append(
                $('<img src="' + ALL_CARDS[i][1] + '" />')
                    .addClass("face back")
                )
            .width(width)
            .height(width + 10)
            .appendTo($('#target_area'))
            .find('img').width('100%').height('100%')
            ;
    }


    $('#target_area .card')
        .click(function (e) {
            e.preventDefault();

            var original = $(this);
            var proxy = $(this).clone();
            var body = $('body');

            original.addClass("origshown");

            proxy
                .css({
                    'position': 'absolute',
                    'top': this.offsetTop,
                    'left': this.offsetLeft - 5
                })
                .click(function () {
                    original.removeClass("origshown");
                    $(this).remove();
                })
                .addClass("clone")
                .appendTo($('#target_area'))
                ;

            var border_width = 10;

            proxy
                .css({
                    'background-color': 'white',
                    'top': border_width,
                   ...