JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="nav">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</nav>

CSS

nav li {
    width: 100px;
    background: #DDD;
    margin: 10px;
}
nav li:hover,
nav li.selected {
    width:150px;
    background: coral;
}

JavaScript

var nav = document.getElementById('nav'),
    selected = nav.getElementsByClassName('selected');

nav.onclick = function(e) {
    if (e.target.nodeName === 'LI') {
        if (selected.length) selected[0].className = '';
        e.target.className = "selected";
    }
};