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;
}