JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="sortable1" class="connectedSortable ui-helper-reset">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
</ul>
<ul id="sortable2" class="connectedSortable ui-helper-reset">
    <li class="ui-state-highlight">Item 1</li>
    <li class="ui-state-highlight">Item 2</li>
    <li class="ui-state-highlight">Item 3</li>
    <li class="ui-state-highlight">Item 4</li>
    <li class="ui-state-highlight">Item 5</li>
</ul>
<ul id="drop_zone" class="ui-helper-reset"></ul>

CSS

#sortable1, #sortable2 {
    margin: 0 0 30px 0;
}
#sortable1 li, #sortable2 li {
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
    border: 1px solid black;
    background: #FFF;
}
#drop_zone {
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
    height: 25px;
    border: 1px solid green;
}
#drop_zone.ui-state-hover {
    background: green;
}

JavaScript

$("#sortable1, #sortable2").sortable({
    connectWith: '.connectedSortable, #trash'
}).disableSelection();

$("#drop_zone").droppable({
    accept: ".connectedSortable li",
    hoverClass: "ui-state-hover",
    drop: function (ev, ui) {
        $("<li></li>").text(ui.draggable.text()).appendTo(this);
        ui.draggable.remove();
    }
});