JSFiddle - React, Tailwind, and code Playground

by rlemon

HTML

<!-- Look! No HTML -->

CSS

body {
    background-color: #000;   
}
img { 
    position: absolute; border: 3px solid #fff;
    -moz-box-shadow: 0 0 1em #00f;
    -webkit-box-shadow: 0 0 1em #00f;
    -o-box-shadow: 0 0 1em #00f;
    box-shadow: 0 0 1em #00f; 
}

JavaScript

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);
};

var images = [
    "http://dummyimage.com/90/09f.png/fff",
    "http://dummyimage.com/90/19f.png/fff",
    "http://dummyimage.com/90/29f.png/fff",
    "http://dummyimage.com/90/39f.png/fff",
    "http://dummyimage.com/200/55f.png/fff",
    "http://dummyimage.com/150/49f.png/fff",
    "http://dummyimage.com/100/69f.png/fff",
    "http://dummyimage.com/80/79f.png/fff",
    "http://dummyimage.com/125/89f.png/fff",
    "http://dummyimage.com/150/34f.png/fff",
    "http://dummyimage.com/130/465.png/fff",
    "http://dummyimage.com/120/551.png/fff"
    ];
var positions = [
    [32, 32],
    [32, 32],
    [32, 32],
    [32, 32],
    [256, 32],
    [256, 32],
    [256, 32],
    [256, 32],
    [128, 128],
    [128, 128],
    [128, 128],
    [128, 128]
    ];
var rotations = [
    -5,
    -10,
    0,
    10,
    25,
    -20,
    15,
    -10,
    5,
    -25,
    25,
    -8
    ];


for (var i = 0, j = images.length; i < j; i++) {
    var el = document.createElement("img");
    el.src = images[i];
    el.className = "img";
    el.style.left = positions[i][0] + "px";
    el.style.top = positions[i][1] + "px";
    el.rotate(rotations[i]);
    document.body.appendChild(el);
}