JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <ul>
        <li  tabindex="1">item1</li>
        <li  tabindex="2">item2</li>
        <li  tabindex="3">item3</li>
        <li tabindex="4">item4</li>
        <li tabindex="5">item5</li>
        <li tabindex="6">item6</li>
        <li tabindex="7">item7</li>
        <li tabindex="8">item8</li>
        <li tabindex="9">item9</li>
        <li tabindex="10">item10</li>
    </ul>
</div>

CSS

.container {
    height:100px;
    border-color:black;
    overflow:auto;
}
li {
    outline: none;
    cursor: default;
}
.active{
    background-color:yellow;    
}

JavaScript

$('div.container').on('focus', 'li', function() {
    $this = $(this);
    $this.addClass('active').siblings().removeClass();
    $this.closest('div.container').scrollTop($this.index() * $this.outerHeight());
}).on('keydown', 'li', function(e) {
    $this = $(this);
    if (e.keyCode == 40) {        
        $this.next().focus();
        return false;
    } else if (e.keyCode == 38) {        
        $this.prev().focus();
        return false;
    }
}).find('li').first().focus();