JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
<a href="#" id="addAWidget">Add a widget</a> on column <select id="columnNumber"><option>1</option><option>2</option><option>3</option><option>4</option></select>
<div id="columns">
    <ul id="column1" class="column">
    </ul>
    <ul id="column2" class="column">
    </ul>
    <ul id="column3" class="column">
    </ul>
    <ul id="column4" class="column">
    </ul>
</div>

CSS

/* Colors */
.color-yellow {background:#f2bc00;}
.color-red    {background:#dd0000;}
.color-blue   {background:#148ea4;}
.color-white  {background:#dfdfdf;}
.color-orange {background:#f66e00;}
.color-green  {background:#8dc100;}
.color-yellow h3,
.color-white h3,
.color-green h3
    {color:#000;}
.color-red h3,
.color-blue h3,
.color-orange h3
    {color:#FFF;}
/* End Colors */

/* Head section */
#head {
    background: #FFF;
    height: 100px;
}
#head h1 {
    line-height: 100px;
    color: #FFF;
    text-align: center;
    text-indent: -9999em
}
/* End Head Section */

/* Columns section */
#columns .column {
    float: left;
    width: 25%;
        /* Min-height: */
        min-height: 400px;
        height: auto !important; 
        height: 400px;
}

/* Column dividers (background-images) : */
    
#columns #column1 .widget { margin: 30px 35px 0 25px; }
#columns #column3 .widget { margin: 30px 25px 0 35px; }
#columns .widget {
    margin: 30px 20px 0 20px;
    padding: 2px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
#columns .widget .widget-head {
    color: #FFF;
    overflow: hidden;
    width: 100%;
    height: 30px;
    line-height: 30px;
}
#columns .widget .widget-head h3 {
    padding: 0 5px;
    float: left;
}
#columns .widget .widget-content {
    background: #FFF;
    padding: 0 5px;
    color: #000;
    -moz-border-radius-bottomleft: 2px;
    -moz-border-radius-bottomright: 2px;
    -webkit-border-bottom-left-radius: 2px;
    -webkit-border-bottom-right-radius: 2px;
    line-height: 1.2em;
    overflow: hidden;
}
#columns .widget .widget-content p {
    padding: 0.8em 0;
    border-bottom: 1px solid #666;
}
#columns .widget .widget-content img {
    float: right;
    margin: 10px;
    border: 1px solid #FFF;
}
#columns .widget .widget-content pre {
    padding: 0.5em 5px;
    color: #EEE;
    font-size: 12px;
}
#columns .widget .widget-content ul {
    padding: 5px 0 5px 20px;
    list-style: disc;
}
#columns .widget...

JavaScript

$('.column').sortable({
    items: '> li',
    connectWith: '.column',
    handle: '.widget-head',
    placeholder: 'widget-placeholder',
    forcePlaceholderSize: true,
    revert: 300,
    delay: 100,
    opacity: 0.8,
    containment: 'document',
    start: function(e, ui) {
        $(ui.helper).addClass('dragging');
    },
    stop: function(e, ui) {
        $(ui.item).css({
            width: ''
        }).removeClass('dragging');
        $('.column').sortable('enable');
    }
});


$('#addAWidget').on('click', function(event) {
    var newWidget = '<li class="widget color-white"><div class="widget-head"><h3>Newly added widget</h3></div><div class="widget-content"><p>Yet another lorem ipsum !</p></div></li>';
    $(newWidget).appendTo('#column' + $('#columnNumber').val());

});
$('#addAWidget').click();
$('#addAWidget').click();
$('#addAWidget').click();
$('#addAWidget').click();
$('#columnNumber').val(2);
$('#addAWidget').click();
$('#addAWidget').click();
$('#addAWidget').click();
$('#addAWidget').click();
$('#columnNumber').val(3);
$('#addAWidget').click();
$('#addAWidget').click();
$('#addAWidget').click();
$('#addAWidget').click();