JSFiddle - React, Tailwind, and code Playground

HTML

Click on one of the images ...
<div id="wrapper">
<img width="75" height="75" src="http://farm3.static.flickr.com/2697/4106711273_969cc50546_s.jpg" />
<img width="75" height="75" src="http://farm3.static.flickr.com/2639/4142476380_7b928bdd6d_s.jpg" />
<img width="75" height="75" src="http://farm3.static.flickr.com/2607/4194526085_a129ff3485_s.jpg" />
<img width="75" height="75" src="http://farm4.static.flickr.com/3298/3502874366_d73cb0f6fe_s.jpg" />
<img width="75" height="75" src="http://farm3.static.flickr.com/2697/4106711273_969cc50546_s.jpg" />
<img width="75" height="75" src="http://farm3.static.flickr.com/2639/4142476380_7b928bdd6d_s.jpg" />
<img width="75" height="75" src="http://farm3.static.flickr.com/2607/4194526085_a129ff3485_s.jpg" />
<img width="75" height="75" src="http://farm4.static.flickr.com/3298/3502874366_d73cb0f6fe_s.jpg" />
<img width="75" height="75" src="http://farm3.static.flickr.com/2639/4142476380_7b928bdd6d_s.jpg" />

</div>

CSS

body {
    background: url(http://img263.imageshack.us/img263/343/darkwoodsx7.jpg);
    font-family: "Georgia", "Times New Roman", serif;
    font-size: .8em;
    color: #fff;
    text-align: center;
    text-shadow: 0 -1px 0 #000;
}

h1 {
    font-size: 1.7em;
    line-height: 150%;
}

#wrapper {
    position: relative;
    height: 320px;
    width: 280px;
    margin: 15px auto;
}

img {
    position: relative;
    float: left;
    padding: 0;
    margin: 5px;
    -webkit-box-shadow: 0 0 5px #000;
    -moz-box-shadow: 0 0 5px #000;
    border: solid 2px #FFFAF2;
    border-bottom: solid 15px #FFFAF2;
    -webkit-transition: -webkit-transform 0.20s ease-in-out;
    -moz-transition: -moz-transform 0.20s ease-in-out;
}

JavaScript

//jquery version of http://www.jsfiddle.net/oskar/c6n7q/
var collapsed = false;

//http://www.evanbot.com/article/jquery-delay-plugin/4
jQuery.fn.delay = function(time,func){
    this.each(function(){
        setTimeout(func,time);
    }); 
    return this;
};

//http://gsgd.co.uk/sandbox/jquery/easing/
jQuery.extend(jQuery.easing, {
    easeOutBack: function (x, t, b, c, d, s) {
        if (s == undefined) s = 1.70158;
        return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
    }
});


(function($) {
    $.fn.elementStacks = function(options) {
        var opts = $.extend({}, $.fn.elementStacks.defaults, options);

        return this.each(function() {
            var pos, collapsed = false, stackItems = $(opts.items_selector, this);

            var $that = $(this);
            stackItems
                .each(function(index, img) {
                    $(img)
                        .attr('coords', this.offsetTop + ':' + this.offsetLeft)
                        .css({'top' : this.offsetTop, 'left' : this.offsetLeft });
                })
                .css({'position': 'absolute'})
                .click(function(e) {
                    var $this = $(this);
                    
                    if (!$this.attr('coords')) {
                        return;
                    };
                    
                    stackItems.each(function(index, stackItem) {
                        var target = (!collapsed) ? $this : null;
                        $.fn.elementStacks.reStack($(stackItem), collapsed, opts, target);
                    });
                    collapsed = !collapsed;
                });
        });
    };
    
    $.fn.elementStacks.defaults = {
        'items_selector': 'img',
        'rotationDeg': 20,
        'delay': 40,
        'duration': 900,
        'transaction': 'easeOutBack'
    };
    
    $.fn.elementStacks.random = function(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    };
    
   ...