JSFiddle - React, Tailwind, and code Playground

HTML

<div id="droppable" class="ui-widget-header">
    <p>Drop here</p>
</div>
<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>
</ul>

CSS

#droppable {
    width: 120px;
    height: 90px;
    padding: 0.5em;
    float: left;
    margin: 10px;
}
#sortable {
    clear:both;
}

JavaScript

$(function () {

    $("#droppable").droppable({
        drop: function (e, ui) {
            ui.draggable.css("background", "red");
        }
    });
    $("#sortable").sortable({
        connectWith: "#droppable"
    });
});