JSFiddle - React, Tailwind, and code Playground

HTML

<div id="dropzone" class="box">
    <span id="txt">This is the dropzone.</span>
    <a id="lnk" href="http://google.com"><img id="img" src="http://www.google.com/images/srpr/nav_logo71.png" /></a>
</div>

CSS

.box {
  width: 300px;
  height: 300px;
  background-color: gray;  
}
.highlight {
  background-color: yellow !important;   
}

JavaScript

function liteBox(){$("#dropzone").addClass("highlight");return false;}
function darkBox(){$("#dropzone").removeClass("highlight");return false;}

$("#dropzone").bind("dragover", liteBox);
$("#dropzone").bind("dragleave", darkBox);

$("#dropzone").bind("drop", function(e){
    alert("Drop received by "+e.target.id);
    return false;
});