JSFiddle - React, Tailwind, and code Playground

HTML

<div id="greatplan" class="ui-widget-content">
    <p>Great Plan!</p>
</div>
<br>
<div id="poorplan" class="ui-widget-content">
    <p>Poor Plan!</p>
</div>
<div id="droppable" class="ui-widget-header">
    <p>Drop your plan here</p>
</div>

JavaScript

$("#greatplan").draggable();
$("#poorplan").draggable();

$("#droppable").droppable({
    drop: function (event, ui) {
        switch (ui.draggable.attr('id')) {
            case "greatplan":
                $(this).addClass("ui-state-highlight").find("p").html("Great Plan Picked!");
                break;
            case "poorplan":
                $(this).addClass("ui-state-highlight").find("p").html("Poor Plan Picked!")
                break;
        }
    }
});