JSFiddle - React, Tailwind, and code Playground

HTML

<table id="chess">
        <tr>
            <td><a>&#9820;<a></td>
            <td><a>&#9822;<a></td>
            <td><a>&#9821;<a></td>
            <td><a>&#9819;<a></td>
            <td><a>&#9818;<a></td>
            <td><a>&#9821;<a></td>
            <td><a>&#9822;<a></td>
            <td><a>&#9820;<a></td>
        </tr>
        <tr>
            <td><a class="acceptable">&#9817;<a></td>
            <td><a>&#9817;<a></td>
            <td><a>&#9817;<a></td>
            <td><a>&#9817;<a></td>
            <td><a>&#9817;<a></td>
            <td><a>&#9817;<a></td>
            <td><a>&#9817;<a></td>
            <td><a>&#9817;<a></td>

                
        </tr>
        
        <tr>
            <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>
        </tr>
        <tr>
            <td><a>&#9817;<a></td>
            <td><a>&#9817;<a></td>
            <td><a>&#9817;<a></td>
            <td><a>&#9817;<a></td>
            <td><a>&#9817;<a></td>
            <td><a>&#9817;<a></td>
            <td><a>&#9817;<a></td>
            <td><a>&#9817;<a></td>
            <td><a>&#9817;<a></td>
            <td><a>&#9817;<a></td>
                
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

CSS

#chess {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor:pointer;
}    
td {
    width: 40px;
    height: 40px;
}
a {
    font-weigt: 600;
    font-size: 30px;
    color: white;
    text-shadow: black 1px 1px 2px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
tr:nth-child(odd) td:nth-child(even), tr:nth-child(even) td:nth-child(odd) {
    background-color: grey;
}
tr:nth-child(odd) td:nth-child(odd), tr:nth-child(even) td:nth-child(even){
    background-color: #CCC;
}

JavaScript

$('a').draggable({ containment: "table", revert: 'invalid' });

$('td:empty').droppable({
        drop: function(ev, ui) {
            var dropped = ui.draggable;
            var droppedOn = $(this);
            $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);
        },
    accept: function() {
        return !$(this).html();
    },
    drop: function(event,ui) {
           $('td:empty').each(function(index) {
               $(this).droppable( "option", "disabled", false );
           });                   
    }    
    });