JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td class="a">&nbsp;</td>
        <td class="b">&nbsp;</td>
        <td class="c">&nbsp;</td>
        <td class="b">&nbsp;</td>
        <td class="c">&nbsp;</td>
        <td class="a">&nbsp;</td>
        <td class="c">&nbsp;</td>
  </tr>
    <tr>
        <td class="c">&nbsp;</td>
        <td class="a">&nbsp;</td>
        <td class="c">&nbsp;</td>
        <td class="b">&nbsp;</td>
        <td class="a">&nbsp;</td>
        <td class="a">&nbsp;</td>
        <td class="c">&nbsp;</td>
  </tr>
    <tr>
        <td class="a">&nbsp;</td>
        <td class="b">&nbsp;</td>
        <td class="c">&nbsp;</td>
        <td class="b">&nbsp;</td>
        <td class="c">&nbsp;</td>
        <td class="a">&nbsp;</td>
        <td class="c">&nbsp;</td>
  </tr>
  </table>

CSS

table, td {
    background-color: white;   
    border: 0px solid white;
    border-collapse: collapse;   
}

td {
    width: 40px;  
    height: 40px;
}

.a{background-color: red; border: 2px solid red; }
.b{background-color: green; border: 2px solid green;}
.c{background-color: orange; border: 2px solid orange;}

.highlightedTop{
    border-top: 2px solid black;
}
.highlightedBottom{
    border-bottom: 2px solid black;
}
.highlighted {
    border-left:  2px solid black;
    border-right: 2px solid black;
    width: 20px;
    height: 20px;

}
.highlightedPrev {
    border-right: 2px solid black;
}

JavaScript

$('td').hover(function() {
    var t = parseInt($(this).index()) + 1;
    $('td:nth-child(' + t + ')').first().addClass('highlightedTop');
    $('td:nth-child(' + t + ')').addClass('highlighted')
    $('td:nth-child(' + t + ')').last().removeClass('highlighted').addClass('x');

    $('td').css({
        height: '39px'
    });

    if (t > 1) {
        var t1 = t - 1;
        $('td:nth-child(' + t1 + ')').addClass('highlightedPrev');
        $('td:nth-child(' + t1 + ')').last().removeClass('highlightedPrev');

    }
}, function() {
    var t = parseInt($(this).index()) + 1;
    $('td:nth-child(' + t + ')').removeClass('highlighted ');
    $('td:nth-child(' + t + ')').first().removeClass('highlightedTop');
    $('td:nth-child(' + t + ')').last().removeClass('highlightedBottom');
    $('td:nth-child(' + t + ')').last().removeClass('x');
    if (t > 1) {
        var t1 = t - 1;
        $('td:nth-child(' + t1 + ')').removeClass('highlightedPrev');
    }
});