JSFiddle - React, Tailwind, and code Playground
HTML
<ul class="dropdown-menu">
<li tabindex="-1">1</li>
<li tabindex="-1">2</li>
<li tabindex="-1">3</li>
<li tabindex="-1">4</li>
<li tabindex="-1">5</li>
<li tabindex="-1">6</li>
<li tabindex="-1">7</li>
<li tabindex="-1">8</li>
<li tabindex="-1">9</li>
<li tabindex="-1">10</li>
<li tabindex="-1">11</li>
<li tabindex="-1">12</li>
<li tabindex="-1">13</li>
<li tabindex="-1">14</li>
<li tabindex="-1">15</li>
<li tabindex="-1">16</li>
<li tabindex="-1">17</li>
<li tabindex="-1">18</li>
<li tabindex="-1">19</li>
</ul>
CSS
ul { overflow: auto; height: 100px; padding: 5px; border: 1px solid blue; }
.active { background-color: red; }
JavaScript
$(function () {
//Credits: http://stackoverflow.com/a/1527820/297641
function getRandomInt (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var liOptions = $('.dropdown-menu li');
setInterval(function () {
$('li.active').removeClass('active');
liOptions.eq(getRandomInt(0, 18)).addClass('active')
.focus();
}, 2000);
});