JSFiddle - React, Tailwind, and code Playground

by csaltyj

HTML

<div id="wall">
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>

</div>

CSS

#wall {
    position: relative;
    width: 400px;
    height: 600px;
    overflow: hidden;
}

.module {
    z-index: 3;
    position: absolute;
    float: left;
    width: 80px;
    height: 80px;
    border: 1px solid #000;
    background: #f00;
    -webkit-box-sizing: border-box;
}

JavaScript

var modLeft = 0;
var modTop = 0;

$('.module').each(function() {
    $(this).css({
        'left': modLeft + 'px',
        'top': modTop + 'px'
    });

    if ((modLeft += 80)+80 > $('#wall').outerWidth())
    {
        modLeft = 0;
        modTop += 80;
    }
});

$('.module').on('click', function() {
    $(this).css('z-index', 4).animate({
        width: '240px',
        height: '160px'
    }, 1000);
});