JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xml:lang="en" lang="en">
<head>
</head>

<body>
        <div id="trash">
                <span>Trash</span>
        </div>
        
        <div id="items">
                <div id="item1" class="item"><span>Item 1</span></div>
                <div id="item2" class="item"><span>Item 2</span></div>
                <div id="item3" class="item"><span>Item 3</span></div>

        </div>
</body>

</html>

CSS

body {
        font: bold 12px arial;
}

span {
        float: left;
        margin-top: 17px;
        text-align: center;
        width: 100%;
}

#trash, #items, .item {
        height: 50px;
        width: 50px;
}

#trash {
        background: #a6bcce;
        color: #354e62;
}

#items {
       margin-top: 10px;
       width: 400px;
       height: 100px;
       border: 1px solid black;
}

.item {
        background: #cdcdcd;
        color: #3b3b3b;
        float: left;
        margin-right: 10px;
}

JavaScript

$(function() {
        $(".item").draggable({
                revert: 'invalid',
                cursor: 'move'

        });
    
        $("#items").droppable({
                drop: function( event, ui ) {
                    $("#trash").droppable( "enabled" )
                }
        });
        
        $("#trash").droppable({
                over: function() {
                      
                },
                out: function() {
                    $(this).droppable( "enabled" )   
                },
                drop: function( event, ui ) {
                    $(this).droppable( "disable" )
                }
        });
});