JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<div id=contentarea class=".item_content">

    <ul class="sortable">
        <li class="ui-state-default">OLPP-44   </li>
        <li class="ui-state-default">OLPP-22   </li>
        <li class="ui-state-default">OLPP-287  </li>
        <li class="ui-state-default">OLPP-139  </li>
        <li class="ui-state-default">OLPP-220  </li>
        <li class="ui-state-default">OLPP-254  </li>
        <li class="ui-state-default">OLPP-257  </li>
        <li class="ui-state-default">OLPP-260  </li>
        <li class="ui-state-default">OLPP-261  </li>
        <li class="ui-state-default">OLPP-286  </li>
        <li class="ui-state-default">OLPP-106  </li>
        <li class="ui-state-default">OLPP-52   </li>
        <li class="ui-state-default">OLPP-102  </li>
        <li class="ui-state-default">OLPP-120  </li>
        <li class="ui-state-default">OLPP-124  </li>
        <li class="ui-state-default">OLPP-143  </li>
        <li class="ui-state-default">OLPP-159  </li>
        <li class="ui-state-default">OLPP-162  </li>
        <li class="ui-state-default">OLPP-168  </li>
        <li class="ui-state-default">OLPP-176  </li>
        <li class="ui-state-default">OLPP-181  </li>
        <li class="ui-state-default">OLPP-199  </li>
        <li class="ui-state-default">OLPP-258  </li>
        <li class="ui-state-default">OLPP-288  </li>
        <li class="ui-state-default">OLPP-57   </li>
        <li class="ui-state-default">OLPP-69   </li>
        <li class="ui-state-default">OLPP-75   </li>
        <li class="ui-state-default">OLPP-183  </li>
        <li class="ui-state-default">OLPP-262  </li>
        <li class="ui-state-default">OLPP-54   </li>
        <li class="ui-state-default">OLPP-60   </li>
        <li class="ui-state-default">OLPP-87   </li>
     ...

CSS

#contentbox {
    padding: 0;
    margin: 0;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 3px solid #b8c6dd;
    width: 450px;
}

#contentbox .title {
    background: rgb(30, 87, 153);
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0);
    /* IE6-9 */
    padding: 13px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 25px;
    color: #FFF;
    font-weight: bold;
    text-shadow: #069 1px 1px 1px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    -moz-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
}

#contentbox .content {
    font-size: 16px;
    color: #666;
    font-family: Tahoma, Geneva, sans-serif;
    padding: 6px;
    line-height: 24px;
    border-bottom: 1px solid #b8c6dd;
}

#contentarea {
    padding: 0;
    margin: 0;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 1px solid #b8c6dd;
    width: 500px;
    min-height: 200px;
    overflow: hidden;
}

#contentarea .item_content {
    margin: 0;
}

.sortable {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 60%;
}

#sortable li {
    margin: 0 3px 3px 3px;
    padding: 0.4em;
    padding-left: 1.5em;
    font-size: 1.4em;
    height: 18px;
}

#sortable li span {
...

JavaScript

$(function() {

     $(".sortable").sortable({
         receive: function(event, ui) {
             ui.item = $("<li></li>").append(ui.item);
         },
         placeholder: "ui-state-highlight"
     });
     $('.sortable').droppable({
         drop: function(event, ui) {
             ui.draggable = $("<li></li>").append(ui.draggable);
         }
     });
     $("#sortable").disableSelection();
     // $("#contentbox").draggable({snap: ".item_content", snapMode: "inner"});

     $("#contentbox").draggable({
         connectToSortable: ".sortable",
         helper: "clone",
         revert: "invalid"
     });

 });