JSFiddle - React, Tailwind, and code Playground

by Marco Fucci

HTML

Click on one of the images ...
<div id="wrapper">
<img width="75" height="75" src="http://farm4.static.flickr.com/3213/2464885290_208ca5afa7_m.jpg" />
<img width="75" height="75" src="http://farm3.static.flickr.com/2305/2464064429_2310ab60b2_m.jpg" />
<img width="75" height="75" src="http://farm3.static.flickr.com/2143/2769889963_7d51ce2702_m.jpg" />
<img width="75" height="75" src="http://farm1.static.flickr.com/206/459884053_8a7a9dc2c8_m.jpg" />
<img width="75" height="75" src="http://farm1.static.flickr.com/251/459884041_92ae9dcc0f_m.jpg" />
<img width="75" height="75" src="http://farm1.static.flickr.com/214/459884021_17921233c5_m.jpg" />
<img width="75" height="75" src="http://farm1.static.flickr.com/191/459792641_2771d6afa0_m.jpg" />
<img width="75" height="75" src="http://farm4.static.flickr.com/3213/2464885290_208ca5afa7_s.jpg" />
<img width="75" height="75" src="http://farm1.static.flickr.com/206/459884053_8a7a9dc2c8_m.jpg" />


</div>

CSS

body {
    background-color: #000;
    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

var current_z_index = 1;
var imgs = $('#wrapper img');
var firstImg = imgs[0];
imgs.each(function(index, img) {
    var rand = Math.floor(Math.random() * (20 - -20 + 1) + -20);
    $(img).css({
        'top' : firstImg.offsetTop, 
        'left' : firstImg.offsetLeft,
        '-webkit-transform': 'rotate(' + rand + 'deg)',
        '-moz-transform': 'rotate(' + rand + 'deg)'
    });
}).css({'position': 'absolute'}).click(function() {
    var rand = Math.floor(Math.random() * (imgs.length + 1));
    $(imgs[rand]).queue(function() {
        $(this).animate({
            left: 100 
        });
        $(this).dequeue();
    }).queue(function() {
        $(this).css({'z-index': current_z_index++}).animate({
            left: 0 
        });
        $(this).dequeue();        
    });
});