JSFiddle - React, Tailwind, and code Playground

HTML

<div id="areaItens">
    <table border="0" width="100%" cellspacing="0" cellpadding="0" id="data">
        <tbody>
            <tr>
                <td height="30" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom: 1px solid #999999">item number 01</td>
            </tr>
            <tr>
                <td height="30" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom: 1px solid #999999">item number 02</td>
            </tr>
            <tr>
                <td height="30" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom: 1px solid #999999">item number 03</td>
            </tr>
            <tr>
                <td height="30" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom: 1px solid #999999">item number 04</td>
            </tr>
            <tr>
                <td height="30" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom: 1px solid #999999">item number 05</td>
            </tr>
            <tr>
                <td height="30" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom: 1px solid #999999">item number 06</td>
            </tr>
            <tr>
                <td height="30" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom: 1px solid #999999">item number 07</td>
            </tr>
            <tr>
                <td height="30" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom: 1px solid #999999">item number 08</td>
            </tr>
            <tr>
                <td height="30" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom: 1px solid #999999">item number 09</td>
            </tr>
            <tr>
                <td height="30" style="border-left-width: 1px;...

CSS

#areaItens {
    width:100%;
    height: 160px;
    border:1px solid #666;
    overflow:auto;
}
.highlight {
    background-color:green;
}

JavaScript

$(document).ready(function () {
    window.addEventListener("keydown", function (e) {
        // space and arrow keys
        if ([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
            e.preventDefault();
        }
    }, false);

    function highlight(tableIndex) {

        var parent = $("#areaItens");

        // Just a simple check. If .highlight has reached the last, start again
        if ((tableIndex + 1) > $('#data tbody tr').length) tableIndex = 0;

        // Element exists?
        if ($('#data tbody tr:eq(' + tableIndex + ')').length > 0) {
            $('#data tbody tr').removeClass('highlight');
            var currentEl = $('#data tbody tr:eq(' + tableIndex + ')');
            currentEl.addClass('highlight');
            parent[0].scrollTop = currentEl[0].offsetTop;
        }
    }


    $(document).keydown(function (e) {

        switch (e.which) {
            case 38:
                highlight($('#data tbody tr.highlight').index() - 1);
                break;
            case 40:
                highlight($('#data tbody tr.highlight').index() + 1);
                break;
        }

    });

}); //]]>