JSFiddle - React, Tailwind, and code Playground

by mjmitche

HTML

<div id="blackbox">
    <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

#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{ background: #000; 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");          
 $("#blackbox").css({'background':'pink'}); 
             }      
      }); 
 });