JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav-bar">
    <ul>
        <li class="active-page">One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>
</div>

CSS

#nav-bar li:not(.active-page):active {
    transform: translate( 10px, 10px );
}
/* The code above is the only code being tested */
 ul {
    padding: 0;
}
li {
    cursor: pointer;
    padding: .5em 1em;
    display: inline-block;
    font: 1em"Segoe UI";
    border-radius: .5em;
    transition: transform .5s, background .5s;
}
li.active-page {
    color: #FFF;
    background: #a0df00;
}
li:not(.active-page):hover {
    color: #666;
    background: #CCC;
}