JSFiddle - React, Tailwind, and code Playground

HTML

<div class="drop">drop here</div>
<div class="source" draggable=true>drag me</div>

CSS

div{
    height: 100px;
    width: 100px;
    position relative;
}
div.drop{
    background: red;
}
div.source{
    background: green;
}

JavaScript

$('.drop').on('drop dragdrop',function(){
    alert('dropped');
});
$('.drop').on('dragenter',function(){
    $(this).html('drop now').css('background','blue');
})
$('.drop').on('dragleave',function(){
    $(this).html('drop here').css('background','red');
})
$('.drop').on('dragover',function(event){
    event.preventDefault();
})