JSFiddle - React, Tailwind, and code Playground

HTML

<div id="droppable"></div>

<div class="demo">
<ul id="sortable">
    <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>
    <li class="ui-state-default">Item 6</li>
    <li class="ui-state-default">Item 7</li>
</ul>
</div>

CSS

#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; }
html>body #sortable li { border: 1px solid; height: 1.5em; line-height: 1.2em; }
.ui-state-highlight { background-color: yellow; height: 1.5em; line-height: 1.2em; }
#droppable { width: 100px; height: 40px; background-color: black; margin: 5px;}
.droppable-active { background-color: red; }

JavaScript

$(function() {
        $( "#sortable" ).sortable({
            placeholder: "ui-state-highlight"
        });
        $( "#sortable" ).disableSelection();
    $( "#droppable" ).droppable({
        tolerance: 'pointer',
        //accept: "#sortable",
        over: function(event, ui){
            ui.draggable.hide();
            $(this).css('background-color','red');
        },
        out: function(event, ui){
            ui.draggable.show();
            $(this).css('background-color','black');
        },
    });    
});