JSFiddle - React, Tailwind, and code Playground

by JThomas

HTML

<div class="tile-grid">
    <div class="tile ss1">
        <img src="http://www.placekitten.com/100/100" />
    </div>
    <div class="tile ss1">
        <img src="http://www.placekitten.com/100/99" />
    </div>
    <div class="tile ss1">
        <img src="http://www.placekitten.com/100/95" />
    </div>
    <div class="tile ss1">
        <img src="http://www.placekitten.com/100/97" />
    </div>
    <div class="tile ms1">
        <img src="http://www.placekitten.com/100/96" />
    </div>
    <div class="tile ms1">
        <img src="http://www.placekitten.com/100/96" />
    </div>
</div>

CSS

.tile-grid{
    min-height: 100%;
}
.tile-grid > .tile {
    display: inline-block;
}
.tile {
    border: 1px solid #000;
    padding: 5px;
    margin: 2px;
    box-sizing: border-box;
}
.ls1 {
    width: 99%;
}
.ms1 {
    width: 49%;
}
.ss1 {
    width: 24%;
}
.ui-state-highlight{
    height: 100px;
    width: 100px;
}

JavaScript

var UI = function () {
    function init() {
        bindTileSort();
        bindTileDrag();
    }

    function bindTileSort() {
        $(".tile-grid").sortable({
            revert: true,
            placeholder: "ui-state-highlight",
            forcePlaceholderSize: true
        });
    }

    return {
        init: init
    };
}();

UI.init();