JSFiddle - React, Tailwind, and code Playground

HTML

<div id="orange"></div>
<div id="green"></div>
<div id="blue"></div>
<div id="grey"></div>
<div id="brown">
    <div id="white"><p></p></div>
    <div id="yellow"></div>
</div>
<div id="black">
    <div id="pink"></div>
    <div id="lime"></div>
</div>

CSS

#orange {background: orange; width: 20px; height: 20px; position: absolute; left: 0px; top: 10px; z-index: 2;}

#green {background: green; width: 20px; height: 20px; position: absolute; left: 0px; top: 50px;}

#blue{background: blue; width: 20px; height: 20px; position: absolute; left: 0px; top: 90px;}

#grey {background: grey; width: 20px; height: 20px; position: absolute; left: 0px; top: 130px;}

#brown {background: brown; width: 200px; height: 100px; position: absolute; left: 100px; top: 0px;}

#black {background: black; width: 200px; height: 100px; position: absolute; left: 100px; top: 150px;}
#white {background: white; width: 60px; height: 60px; position: absolute; left: 20px; top:20px;}
#yellow {background: yellow; width: 60px; height: 60px; position: absolute; left: 100px; top:20px;}

#pink {background: pink; width: 60px; height: 60px; position: absolute; left: 20px; top:20px;}

#lime {background: lime; width: 60px; height: 60px; position: absolute; left: 100px; top:20px;}

JavaScript

$(function(){
    $("#orange").draggable();
    $("#white").droppable({
        accept: "#orange",
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
        drop: function (event, ui) {
            $(this)
                .addClass ("ui-state-highlight")
                .find ("p")
                          .html("dropped");
                          alert('ok')
             }
      });
    
});