JSFiddle - React, Tailwind, and code Playground

HTML

<div id="draggable" class="ui-widget-content">
<p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>

CSS

#draggable { 
    width: 100px; 
    height: 100px; 
    padding: 0.5em; 
    float: left; 
    margin: 10px 10px 10px 0; 
}
#droppable { 
    width: 150px; 
    height: 150px; 
    padding: 0.5em; 
    float: left; 
    margin: 10px; 
}

JavaScript

$(document).ready(function() {
    $("#droppable").droppable({
        accept: '#draggable',
        drop: function(event, ui) {
            $(this).append(ui.draggable);
        }
    });
    $("#draggable").draggable({
        helper:"clone"
    });
});