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"></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) {
        $(ui.draggable[0]).remove();
    }
});