JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav">
    <li><a id="champions" href="#">Champions</a>

    </li>
    <li><a id="items" href="#">Items</a>

    </li>
    <li><a id="changes" href="#">Changes</a>

    </li>
</ul>

CSS

.nav {
    float: right;
    margin: 0;
    padding: 0;
    list-style: none;
}
.nav li:hover {
    background: #cccccc;
}
.nav li {
    background: a0a0a0;
    padding: 2px;
    display:inline-block;
    margin-right: 5px;
    position: relative;
    box-shadow: 1px 1px #cccccc, 2px 2px #cccccc, 3px 3px #cccccc;
    transition: all 0.1s ease-in;
}
.nav li:active {
    box-shadow: none;
    top: 3px;
    left: 3px;
}
.nav li a {
    text-decoration: none;
}
.nav li a:hover {
    color:orange;
}
div.item {
    margin-top:100px;
    border:1px solid Black;
}

.red {
    color:Red;
}

JavaScript

$(document).ready(function () {
    $('.nav li a').click(function (event) {
        $('.nav li a').removeClass('red');
        $(event.target).addClass("red"); 
    });
});