JSFiddle - React, Tailwind, and code Playground

HTML

<ol id="menu">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ol>

CSS

#menu > li {
    display: inline-block;
    padding: 5px 20px;
    border: 1px solid #444;
    cursor: pointer;
    margin: 4px 2px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
#menu > li.active {
    color: red;
    border-color: red;
    box-shadow: 1px 1px 3px red;
}

JavaScript

$('#menu li').on('mouseover', function() {
    this.classList.add("active");
})
.on('mouseout', function() {
    this.classList.remove("active");
});