JSFiddle - React, Tailwind, and code Playground

by rlemon

HTML

<img src="http://images.wikia.com/hanna-barbera/images/9/9f/Atom_Ant.jpg" class="test" />
<img src="http://images.wikia.com/hanna-barbera/images/9/9f/Atom_Ant.jpg" class="test" />
<img src="http://images.wikia.com/hanna-barbera/images/9/9f/Atom_Ant.jpg" class="test" /><img src="http://images.wikia.com/hanna-barbera/images/9/9f/Atom_Ant.jpg" id="test1" />
<img src="http://images.wikia.com/hanna-barbera/images/9/9f/Atom_Ant.jpg" class="test" />
<img src="http://images.wikia.com/hanna-barbera/images/9/9f/Atom_Ant.jpg" class="test" />
<img src="http://images.wikia.com/hanna-barbera/images/9/9f/Atom_Ant.jpg" class="test" />
<img src="http://images.wikia.com/hanna-barbera/images/9/9f/Atom_Ant.jpg" class="test" />
<img src="http://images.wikia.com/hanna-barbera/images/9/9f/Atom_Ant.jpg" class="test" /><img src="http://images.wikia.com/hanna-barbera/images/9/9f/Atom_Ant.jpg" id="test1" />
<img src="http://images.wikia.com/hanna-barbera/images/9/9f/Atom_Ant.jpg" class="test" />
<img src="http://images.wikia.com/hanna-barbera/images/9/9f/Atom_Ant.jpg" class="test" />
<img src="http://images.wikia.com/hanna-barbera/images/9/9f/Atom_Ant.jpg" class="test" />
<img src="http://images.wikia.com/hanna-barbera/images/9/9f/Atom_Ant.jpg" class="test" />
<img src="http://images.wikia.com/hanna-barbera/images/9/9f/Atom_Ant.jpg" class="test" /><img src="http://images.wikia.com/hanna-barbera/images/9/9f/Atom_Ant.jpg" id="test1" />
<img src="http://images.wikia.com/hanna-barbera/images/9/9f/Atom_Ant.jpg" class="test" />
<img src="http://images.wikia.com/hanna-barbera/images/9/9f/Atom_Ant.jpg" class="test" />

CSS

img { position: absolute; border: 2px solid #000; height: 50px; width: 50px;
    
    -moz-box-shadow: 0 0 1em #666;
    -webkit-box-shadow: 0 0 1em #666;
    -o-box-shadow: 0 0 1em #666;
    box-shadow: 0 0 1em #666; }

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 els = document.getElementsByClassName("test");
for (var i = 0, j = els.length; i < j; i++) {
    els[i].style.top = Math.floor(Math.random() * 200 + 10) + "px";
    els[i].style.left = Math.floor(Math.random() * 200 + 10) + "px";
    els[i].rotate(Math.random() * 50 - 25);
}