JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<div id="draggable" class="ui-widget-content">
    <p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
    <span>Drop here</span>
</div>

CSS

#draggable, #draggable2 {
    width: 90px;
    height: 90px;
    padding: 0.5em;
    float: left;
    margin: 10px 10px 10px 0;
}
#droppable, #droppable2 {
    width: 120px;
    height: 12px;
    padding: 0.5em;
    float: left;
    margin: 10px;
}
h3 {
    clear: left;
}
.ui-state-highlight {
    height:120px;
}

.ui-state-hover {
    height:120px !important;
}

JavaScript

$(function () {
    $("#draggable").draggable({ refreshPositions: true});
    $("#droppable").droppable({
        hoverClass: "ui-state-hover",
        drop: function (event, ui) {
            $(this)
                .addClass("ui-state-highlight")
                .find("p")
                .html("Dropped!");
        }
    });
});