JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

CSS

.selected {background:yellow}
.li {padding:5px
  font-size:5rem

}

JavaScript

$(function(){
    $(window).keydown(function(e){
        if(e.which === 40){ //down
            if($('li.selected').length === 0){ //if nothing is selected yet
                $('li:first').addClass('selected');
            }
        }else if(e.which === 38){ //up
            $('li.selected').removeClass('selected');
        }else if(e.which === 39){ //right
            var liSelected = $('li.selected');
            if(liSelected.length === 1 && liSelected.next().length === 1){
                liSelected.removeClass('selected').next().addClass('selected');
            }
        }else if(e.which === 37){ //left
            var liSelected = $('li.selected');
            if(liSelected.length === 1 && liSelected.prev().length === 1){
                liSelected.removeClass('selected').prev().addClass('selected');
            }
        }
    });
});