JSFiddle - React, Tailwind, and code Playground

HTML

<link href="https://github.com/jquery/jquery-ui/blob/1.10.3/themes/base/jquery.ui.all.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<div id="horizontal" class="connectedSortable">
    <div class="box brown"></div>
    <div class="box yellow"></div>
</div>
<div id="vertical" class="connectedSortable">
    <div class="box blue"></div>
    <div class="box orange"></div>
    <div class="box green"></div>
    <div class="box purple"></div>
</div>

CSS

#vertical, #horizontal {
    min-width: 100px;
    min-height: 100px;
    border: 1px solid red;
}
#vertical {
    margin-top: 1em;
    width: 100px;
}
.box {
    height: 90px;
    width: 90px;
    margin: 5px;
}
#horizontal .box, #horizontal .ui-sortable-placeholder {
    display: inline-block;
}
.blue {
    background-color: blue;
}
.green {
    background-color: green;
}
.purple {
    background-color: purple;
}
.orange {
    background-color: orange;
}
.brown {
    background-color: brown;
}
.yellow {
    background-color: yellow;
}
.ui-sortable-placeholder {
    border: 1px dotted black;
    visibility: visible !important;
    background-color: inherit;
}

JavaScript

$(document).ready(function () {

        $("#vertical").sortable({
            connectWith: ".connectedSortable"
        });

        var $horizontal = $("#horizontal");
        $horizontal.sortable({
            connectWith: ".connectedSortable"
        });
    });