JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://packery.metafizzy.co/packery.pkgd.min.js"></script>
<script src="http://draggabilly.desandro.com/draggabilly.pkgd.min.js"></script>
<div id="container">
    <div class="module-container">
        <!-- sizers -->
        <div class="module-sizer"></div>
        <div class="module">
            <div class="module-half grey-light">
                <div class="half-left">
                    <div class="letter">A</div>A</div>
                <div class="half-right">
                    <img src="http://placehold.it/500x500">
                </div>
            </div>
        </div>
        <div class="module">
            <div class="module-half grey-light">
                <div class="half-left">
                    <div class="letter">B</div>B</div>
                <div class="half-right">
                    <img src="http://placehold.it/500x500">
                </div>
            </div>
        </div>
        <div class="module">
            <div class="module-half grey-light">
                <div class="half-left">
                    <div class="letter">C</div>C</div>
                <div class="half-right">
                    <img src="http://placehold.it/500x500">
                </div>
            </div>
        </div>
        <div class="module">
            <div class="module-half grey-light">
                <div class="half-left">
                    <div class="letter">D</div>D</div>
                <div class="half-right">
                    <img src="http://placehold.it/500x500">
                </div>
            </div>
        </div>
        <div class="module">
            <div class="module-half grey-light">
                <div class="half-left">
                    <div class="letter">E</div>E</div>
                <div class="half-right">
                    <img src="http://placehold.it/500x500">
                </div>
            </div>
        </div>
        <div class="module">
            <div class="module-half...

CSS

.grey-light {
    background: #95a5a6;
}
.white {
    background: #FFFFFF;
}
body {
    background-color: #dddddd !important;
}
* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.module-container {
    width: 100%;
    /* clearfix */
}
.module-container img {
    display: table;
    height: 100%;
    width: 100%;
    /* clearfix */
}
.module-container .gutter-sizer {
    width: 2%;
    display: none;
}
.module-container .module-container:after {
    content:' ';
    display: block;
    clear: both;
}
.module-container .module, .module-container .module-sizer {
    height: auto;
    width: 25%;
    padding: 20px 20px 0 20px;
}
.module-container .module {
    float: left;
}
.module-container .module.wide {
    width: 50%;
}
.module-container .module:hover {
    cursor: pointer;
}
.module-container .module.is-dragging {
    z-index: 2;
}
.half-left {
    float: left;
    margin-top: 14%;
    text-align: center;
    width: 50%;
    color: #ffffff;
}
.half-right {
    float: right;
    width: 50%;
}
.half-add {
    margin-left: -20px;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 100%;
    color: #ffffff;
}
.text-add {
    display: block;
    margin-top: -20px;
}
.text-add-slide {
    display: block;
}
.half-right-image {
    float: right;
    width: 50%;
}
.module-half {
    display: table-cell;
    height: 100%;
}
.letter {
    font-size: 40px;
}
.full {
    font-size: 20px;
    color: #ffffff;
    display: table-cell;
    height: 100%;
}
.text-add .fa-plus-circle {
    font-size: 40px;
}
.top-tools {
    background-color: rgba(255, 255, 255, 0.5);
    padding-bottom: 10px;
    padding-top: 10px;
    position: relative;
    z-index: 10;
}
.row {
    margin-right: 0px !important;
    margin-left: -5px !important;
}
.tool-text {
    font-size: 20px;
    display: inline;
    margin-right: 20px;
}
@media(max-width:767px) {
    .module-container .module, .module-container .module-sizer {
    ...

JavaScript

var container = document.querySelector('#container');
// init
var packery = new Packery(container, {
    rowHeight: '.module-sizer',
    itemSelector: '.module',
    columnWidth: '.module-sizer',
    isInitLayout: true,
    isResizeBound: true,
    horizontal: true
});

var elems = packery.getItemElements();
for (var i = 0; i < elems.length; i++) {
    if (elems[i]) {
        var draggable = new Draggabilly(elems[i]);
        packery.bindDraggabillyEvents(draggable);
    }
}



packery.layout();