JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1">
    <tbody>
        <tr>
            <td class="active">&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>$nbsp;</td>
            <td>$nbsp;</td>
            <td>$nbsp;</td>
            <td>$nbsp;</td>
            <td>$nbsp;</td>
        </tr>
        <tr>
            <td>$nbsp;</td>
            <td>$nbsp;</td>
            <td>$nbsp;</td>
            <td>$nbsp;</td>
            <td>$nbsp;</td>
        </tr>
        <tr>
            <td>$nbsp;</td>
            <td>$nbsp;</td>
            <td>$nbsp;</td>
            <td>$nbsp;</td>
            <td>$nbsp;</td>
        </tr>
        <tr>
            <td>$nbsp;</td>
            <td>$nbsp;</td>
            <td>$nbsp;</td>
            <td>$nbsp;</td>
            <td>$nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

CSS

td.active{
    background: red;
}

JavaScript

var active;
$(document).keydown(function(e){
    active = $('td.active').removeClass('active');
    var x = active.index();
    var y = active.closest('tr').index();
    if (e.keyCode == 37) { 
       x--;
    }
    if (e.keyCode == 38) {
        y--;
    }
    if (e.keyCode == 39) { 
        x++
    }
    if (e.keyCode == 40) {
        y++
    }
    active = $('tr').eq(y).find('td').eq(x).addClass('active');
});