JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://dl.dropbox.com/u/1000295/jquery.masonry.min.js"></script>
<ul id="masonry">
    <li class="layout-card">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li class="layout-card">
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li class="layout-card">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li class="layout-card">
        <ul>
            <li></li>
        </ul>
    </li>
    <li class="layout-card">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li class="layout-card">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li class="layout-card">
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li class="layout-card">
        <ul>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li class="layout-card">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li class="layout-card">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
</ul>

CSS

#masonry {
       
}

#masonry > li {
    width: 140px;
    display:block;
    background: #555;
    margin: 5px;
}

#masonry > li li {
    display:block;
    height:20px;
}

.card-sortable-placeholder {
    background: #aaa !important;
}

.dragging { opacity: .8; background: #ff6903 !important; }

JavaScript

$(document).ready( function () 
{
    var t = $('#masonry');
    
    t.masonry({
        itemSelector:        '.layout-card',
        isResizable:        true
    })
    
    t.sortable({
        distance: 12,
        forcePlaceholderSize: true,
        items: '.layout-card',
        placeholder: 'card-sortable-placeholder layout-card',
        tolerance: 'pointer',
        
        start:  function(event, ui) {            
                   ui.item.addClass('dragging').removeClass('layout-card');
                   ui.item.parent().masonry('reload')
                },
        change: function(event, ui) {
                   ui.item.parent().masonry('reload');
                },
        stop:   function(event, ui) { 
                   ui.item.removeClass('dragging').addClass('layout-card');
                   ui.item.parent().masonry('reload');
        }
   });
})