JSFiddle - React, Tailwind, and code Playground

by Avi Algaly

HTML

<label id="press">Press</label>
<label id="reset">reset</label>

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

CSS

#debug {position:absolute;top:0;left:300px;width:200px;height:200px;border:solid red 1px;overflow:scroll;}
label {background-color:red;}
label:hover {background-color:green;}
#container{position:relative;background-color:green}
.card {position:absolute;border:margin:0;border:solid 1px #808080;}

JavaScript

var slider = 30;
var maxI = 5;
var maxJ = 5;
var cards = [];
var counter = 0;
for (i = 0; i <= maxI; i++) {
    for (j = 0; j <= maxJ; j++) {
        cards[counter++] = "http://fc03.deviantart.net/fs71/i/2010/197/0/3/50x50_Hibird_avatar_by_yoyoheads.gif";
    }
}
var reloadMe = function() {
    $("#container").empty();
    counter = 0;
    for (i = 0; i <= maxI; i++) {
        for (j = 0; j <= maxJ; j++) {
            $("#container").append("<div id='card" + counter + "' class='card' style='left:" + (j * 49) + "px;top:" + (i * 55) + "px;'><img id='img" + counter + "' src='" + cards[counter++] + "'></div>");
        }
    }
}
reloadMe();
$("#press").on("click", function() {
    id = 0
    for (i = 0; i <= maxI; i++) {
        for (j = 0; j <= maxJ; j++) {
            $("#card" + id++).css({
                "top": (slider) + (i * 60) + "px",
                "left": (slider) + (j * 60) + "px",
                "width": "+=" + slider,
                "height": "+=" + slider
            }, 1500)
            $("#img" + id).css({
                "width": "+=" + (slider - 10) + "px",
                "left": "+=" + (slider - 10) + "px"
            }, 1500);
            $("#debug").append("<br>#card" + id + ":" + parseInt(slider) + ":" + (j * 49) + "px");
        }
    }
    slider += 30
})
$("#reset").on("click", function() {
    reloadMe();
})