JSFiddle - React, Tailwind, and code Playground

by Gabriele Petrioli

HTML

<div class="wrapper">
    <div class="box"><h2>I'm block 1</h2></div>
    <div class="box"><h2>I'm block 2</h2></div>
    <div class="box"><h2>I'm block 3</h2></div>
    <div class="box"><h2>I'm block 4</h2></div>
    <div class="box"><h2>I'm block 5</h2></div>
    <div class="box"><h2>I'm block 6</h2></div>
</div>

CSS

.wrapper{
    position:relative;
}

.box{
    width:200px;
    height:100px;
    position:absolute;
    margin:5px;
    cursor:pointer;
    overflow:hidden;
    text-align: center;
    line-height: 100px;
    
        -moz-transition-property: top,left,width,height;
     -webkit-transition-property: top,left,width,height;
         -ms-transition-property: top,left,width,height;
          -o-transition-property: top,left,width,height;
             transition-property: top,left,width,height;

        -moz-transition-duration: 1s;
     -webkit-transition-duration: 1s;
         -ms-transition-duration: 1s;
          -o-transition-duration: 1s;
             transition-duration: 1s;
}

.go{
    height:0;
    width:0;
}

.box:nth-child(1) {
    background: green;
}
.box:nth-child(2) {
    background: red;
}
.box:nth-child(3) {
    background: orange;
}
.box:nth-child(4) {
    background: pink;
}
.box:nth-child(5) {
    background: yellow;
}
.box:nth-child(6) {
    background: cyan;
}

JavaScript

var wrapper = $('.wrapper'),
    boxes = wrapper.children(),
    boxWidth = boxes.first().outerWidth(true),
    boxHeight = boxes.first().outerHeight(true);

function rePosition(){
    var w = wrapper.width(),
        breakat = Math.floor( w / boxWidth );
        
    boxes
        .filter(':not(.go)')
        .each(function(i){
            var matrixX = ((i)%breakat)+1,
                matrixY = Math.ceil((i+1)/breakat);
            
            $(this).css({
                left:(matrixX-1) * boxWidth ,
                top: (matrixY-1) * boxHeight 
            });
        });
}
    
$(window).resize(rePosition);

$(window).trigger('resize');

$('.box').click(function(){
    $(this)
        .siblings()
        .toggleClass('go');
    rePosition();
});