JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dragger">Draggable</div>
<div class="dropper-wrapper">
    <div class="dropper">Droppable</div>
    <div class="dropper">Droppable</div>
</div>

CSS

.dragger, .dropper {
    float: left;
    width: 100px;
    padding: 10px 0px 10px 0px;
    margin: 5px;
    background-color: darkgreen;
    color: white;
    text-align: center;
}
.dropper-wrapper {
    float: left;
}
.dropper {
    clear: left;
    background: darkred;
}
.highlight {
    background-color: lightgreen;
    color: black;
}

JavaScript

function initDroppable() {
    $('.dropper').droppable({
        tolerance: 'touch',
        drop: function (event, ui) {
            $(this)
                .addClass('highlight')
                .text('Dropped')
                .droppable('destroy')
                .siblings().removeClass('highlight');
        },
        hoverClass: 'highlight'
    });
}

$(function () {
    $('.dragger').draggable({
        revert: true,
        helper: 'clone',
        start: function () {
            initDroppable();
            $('.dropper')
                .removeClass('highlight')
                .text('Droppable');
        }
    });
});