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_1" class="ui-widget-header">
    <p>Drop here</p>
</div>
<div id="droppable_2" class="ui-widget-header">
    <p>Drop here</p>
</div>
<div id="droppable_3" class="ui-widget-header">
    <p>Drop here</p>
</div>
<div id="droppable_4" 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; border: 1px solid;}
.ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; border: 1px solid;}

JavaScript

$( "#draggable" ).draggable(); 
for(var i = 0; i < 5; i++) {
    $("#droppable_"+i).droppable({
       activeClass: 'ui-state-hover',
       hoverClass: 'ui-state-active',
       drop: function(event, ui) {
          $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
       }
    });
 }