JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dragbox"><span>1</span></div>
<div class="dragbox"><span>2</span></div>
<div class="dragbox"><span>3</span></div>
<div class="dragbox"><span>4</span></div>

<table>
    <tr>        
        <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
        <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
        <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
        <tr>
        <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
</table>

CSS

body {
    padding: 10px
}
table {    
border-collapse:collapse;
}
table tr {

    margin: 0;
    padding: 0;
}
table tr td {
    border: 1px solid #D3D3D3;
    height: 32px;
    width: 6px;
    vertical-align: middle;
    text-align: center;

}

.dragbox {
    background-color:#436D95;
    color: #FFFFFF;
    cursor: move;
    display: inline-block;
    font-weight: bold;
    height: 31px;
    margin: 8px 0px;
    opacity: 0.75;
    text-align: center;
    vertical-align: middle;
    width: 100px;
    z-index: 50;
    line-height: 1.67em;
}

JavaScript

$(".dragbox").draggable({
    revert: true
});

$("table tr td").droppable({
    tolerance: "pointer",
    accept: ".dragbox",
    drop: function(event, ui) {
        $(this).css({
            'background-color': 'white'
        }).html(ui.draggable.find('span').text());
    },
    over: function(event, ui) {
        $(this).css({
            'background-color': '#DCFFDB'
        });
    },
    out: function(event, ui) {
        $(this).css({
            'background-color': 'white'
        });
    }
});