JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td></td>
        <td></td>
        <td rowspan="2"  colspan="2"></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

CSS

table td {
    border:1px solid #ddd;
    height:30px;
    -moz-user-select:none;
    -webkit-user-select:none;
    user-select:none;
}
.selected {
    background:#69c;
}
table {
    width:100%;
    border-collapse:collapse;
}

JavaScript

$('td').mousedown(function () {
    $(this).closest('table').find('td').removeClass('selected');
    var start = {
        x: this.cellIndex,
        y: this.parentNode.rowIndex
    }
    $(this).closest('table').find('td').mouseover(function () {
        var x1 = Math.min(start.x, this.cellIndex);
        var y1 = Math.min(start.y, this.parentNode.rowIndex);
        var x2 = Math.max(start.x, this.cellIndex);
        var y2 = Math.max(start.y, this.parentNode.rowIndex);

        $(this).closest('table').find('td').each(function () {
            var x = this.cellIndex;
            var y = this.parentNode.rowIndex;
            if (x >= x1 && x <= x2 && y >= y1 && y <= y2) {
                $(this).addClass('selected');
            } else {
                $(this).removeClass('selected');
            }
        });
    });
    var self = this;
    $(document).mouseup(function () {
        $(self).closest('table').find('td').unbind('mouseover');
        $(document).unbind('mouseup');
    });
});