JSFiddle - React, Tailwind, and code Playground

by rlemon

HTML

<div id="container"></div>

CSS

body {
    background-color: #666;   
}
.img { 
    position: absolute; border: 3px solid #fff;
    -moz-box-shadow: 0 0 1em #31688E;
    -webkit-box-shadow: 0 0 1em #31688E;
    -o-box-shadow: 0 0 1em #31688E;
    box-shadow: 0 0 1em #31688E; 
}
#container {
    position: relative;
    background-image: -moz-radial-gradient(center 45deg, circle cover, rgb(0, 0, 255) 1%, rgb(0, 0, 0) 100%);
    background-image: -webkit-radial-gradient(center 45deg, circle cover, rgb(0, 0, 255) 1%, rgb(0, 0, 0) 100%);
    display: block;
    height: 480px;
    width: 640px;
}

JavaScript

Object.prototype.measurement = function() {
    if (this instanceof String) {
        if (this.indexOf("%") != -1) {
            return this;
        }
    }
    return this + "px";
};
Object.prototype.rotate = function(d) {
    var s = "rotate(" + d + "deg)";
    if (this.style) { // regular DOM Object
        this.style.MozTransform = s;
        this.style.WebkitTransform = s;
        this.style.OTransform = s;
        this.style.transform = s;
    } else if (this.css) { // JQuery Object
        this.css("-moz-transform", s);
        this.css("-webkit-transform", s);
        this.css("-o-transform", s);
        this.css("transform", s);
    }
    this.setAttribute("rotation", d);
};
// json info
var info = [
    {
    src: "http://dummyimage.com/55x80/0d0.png/fff",
    pos: {
        top: 93,
        left: 70
    },
    rotate: -10,
    zIndex: 3},
{
    src: "http://dummyimage.com/55x80/d00.png/fff",
    pos: {
        top: 93,
        left: 70
    },
    rotate: 0,
    zIndex: 2},
{
    src: "http://dummyimage.com/55x80/00d.png/fff",
    pos: {
        top: 93,
        left: 70
    },
    rotate: 11,
    zIndex: 1},
{
    src: "http://dummyimage.com/58x83/33f.png/fff",
    pos: {
        top: 195,
        left: 68
    },
    rotate: -10,
    zIndex: 3},
{
    src: "http://dummyimage.com/58x83/33f.png/fff",
    pos: {
        top: 195,
        left: 68
    },
    rotate: 3,
    zIndex: 3},
{
    src: "http://dummyimage.com/58x83/33f.png/fff",
    pos: {
        top: 195,
        left: 68
    },
    rotate: 11,
    zIndex: 3},
{
    src: "http://dummyimage.com/115x80/d65.png/fff",
    pos: {
        top: 60,
        left: 145
    },
    rotate: 10,
    zIndex: 1},
{
    src: "http://dummyimage.com/130x90/8f8.png/fff",
    pos: {
        top: 40,
        left: 265
    },
    rotate: -18,
    zIndex: 3},
{
    src: "http://dummyimage.com/155x200/f00.png/fff",
    pos: {
        top: 55,
        left: 415
    },
    rotate: 6,
    zIndex: 1},

{
    src:...