JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://gridster.net/dist/jquery.gridster.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<div id="log">Trash Can</div>
<div class="gridster">
    <ul>
        <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">1</li>
        <li data-row="1" data-col="2" data-sizex="1" data-sizey="1">2</li>
        <li data-row="1" data-col="3" data-sizex="1" data-sizey="1">3</li>
    </ul>
</div>

CSS

.gridster {
    background-color: gray;
}
li {
    float: left;
    background-color: forestgreen;
    list-style: none;
}
.gridster .preview-holder {
    opacity: 0;
}
#log {
    border: solid 2px red;
    height: 100px;
    width: 100px;
}

JavaScript

$(function () {
    
    // initiate Gridster
    var gridster = $(".gridster ul").gridster({
        widget_margins: [5, 5],
        widget_base_dimensions: [100, 100],
    }).data("gridster")

    // set li's to Jquery draggable elements
    $(".gridster li").draggable();
    
    // set up drop space
    $('#log').droppable({
        drop: function (e, ui) {
            gridster.remove_widget(ui.helper.css('display', 'none'))
        }
    });

});