JSFiddle - React, Tailwind, and code Playground

HTML

<div id='draggable'>Move me</div>
<div class='static'>Above the droppable</div>
<div id='droppable'>Drop Here</div>
<div class='static'>Below the droppable</div>

CSS

#droppable { background: teal; height: 20px; color: white; text-align: center; }
.hovering {border: solid: yellow; }
#droppable.hovering { height: 200px; }

#draggable { height: 80px; background: red; width: 80px; position: absolute; bottom: 50px; padding: 10px; cursor: move; }
.static { height: 50px; background: yellow; padding: 10px; }

JavaScript

$("#droppable").droppable({
    hoverClass: 'hovering'
}).bind('dropout', function () {
    console.log('dropout');
});
                         

$('#draggable').draggable();