JSFiddle - React, Tailwind, and code Playground

HTML

<div id="draggable" class="ui-widget-header">
    <p>Drag Me!</p>
</div>
<div id="droppable" class="ui-widget-header">
    <p>Drop here</p>
</div>

CSS

#draggable {
    float: left;
    width: 100px;
    height: 50px;
    padding: 0.5em;
    margin: 10px;
}
#droppable {
    width: 120px;
    height: 90px;
    padding: 0.5em;
    float: left;
    margin: 10px;
}

JavaScript

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