JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="cont">
<li class="one"></li>
<li class="two"></li>
<li class="three"></li>
<li class="four"></li>
<li class="five"></li>
<li class="six"></li>
<li class="seven"></li>
<li class="eight"></li>
<li class="nine"></li>
</div>

CSS

body {
    background: #eee;
}
#cont {
    background: #fff;
    width: 300px;
    height: 300px;
    position: relative;
}
li {
    height: 100px;
    width: 100px;
    float: left;
}
li:hover {
    cursor: move;
}
li.one{
    background: #777;
}
li.two{
    background: #888;
}
li.three{
    background: #999;
}
li.four{
    background: #AAA;
}
li.five{
    background: #BBB;
}
li.six{
    background: #CCC;
}
li.seven{
    background: #DDD;
}
li.eight{
    background: #EEE;
}
li.nine{
    background: #FFF;
}

JavaScript

$(function() {
    $( "#cont" ).sortable({ revert:"false" });
    });