JSFiddle - React, Tailwind, and code Playground

HTML

<div id="blackbox" class="bg_black">
    <div id="whitebox"><p></p></div>
    <div id="redbox"><p></p></div>
    <div id="yellowbox"><p></p></div>
    <div id="greybox"><p></p></div>
</div>
<div id="pink"></div>
<div id="blue"></div>
<div id="green"></div>
<div id="aqua"></div>

CSS

.bg_black { background-color: #000; }
.bg_pink { background-color: pink; }
.bg_red { background-color: red; }
#pink{ background: #CF59C7; position:absolute;  width: 20px; height: 20px; left: 20px; top: 20px;}
#blue{ background: #2116b9; position:absolute;  width: 20px; height: 20px; left: 20px; top: 100px;}
#green{ background: #184b10; position:absolute;  width: 20px; height: 20px; left: 20px; top: 150px;}
#aqua{ background: #52cdc0; position:absolute;  width: 20px; height: 20px; left: 20px; top: 200px;}

#blackbox{ position:absolute;  width:100px; height: 100px; left:150px; top: 20px;}

#whitebox { background: #fff; position:absolute;  width:25px; height: 25px; left:10px; top: 10px;}

#redbox { background: #9b0c34; position:absolute;  width:25px; height: 25px; left:50px; top: 10px;}


#yellowbox { background: #e1e314; position:absolute;  width:25px; height: 25px; left:10px; top: 50px;}

#greybox { background: #9ba1a0; position:absolute;  width:25px; height: 25px; left:50px; top: 50px;}

JavaScript

$(document).ready(function($) {    
    $("#pink, #blue, #green, #aqua").draggable(); 
    $("#whitebox, #redbox, #yellowbox, #greybox").droppable({           
        accept: "#pink, #blue, #green, #aqua",  
        activeClass: "ui-state-hover",   
        hoverClass: "ui-state-active",      
        drop: function (event, ui) {  
            $(this).addClass ("ui-state-highlight").find ("p").html("dropped"); 
            var oBox = $("#blackbox");
            var curClass = oBox.attr("class");
            var newClass = "bg_black" ? "bg_pink" : "bg_red";
            oBox.removeClass().addClass(newClass);
        }
    }); 
 });