JSFiddle - React, Tailwind, and code Playground

HTML

<div id="drag" class="drag">Drag me</div>
<div class="drop" style="">Drop here</div>
<div  style="clear:both; height:15px;"></div>

<div class="drag2">Drag2 me</div>
 <div class="drop2" style="">Drop2 here</div>

CSS

.drag, .drag2{
    height:40px; width:40px; float:left; border:1px solid red;
}

.drop, .drop2{
    height:100px; width:100px; border:1px solid red; float:right;
}

JavaScript

$(document).ready(function(){
    
    // this can be dropped only inside .drop elements
$('.drag').draggable({   revert: "invalid"});
$('.drop').droppable({
    accept: ".drag",
    drop: function() {
        
           
$( this ).html( "Dropped!" );
   
   }
});

    $('.drag2').draggable({   revert: "invalid"});
 $('.drop2').droppable({
     accept: ".drag2",
     drop: function() {
         
            
 $( this ).html( "Dropped!" );
    
    }
 });

});