JSFiddle - React, Tailwind, and code Playground

by Jonathan Sampson

HTML

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

CSS

#nav-bar li:not(.active-page):active, 
#nav-bar li:not(.active-page).pressed {
    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;
}

JavaScript

(function ($) {

    "use strict";

    $(document).on({
        "mousedown mouseup": function () { $(this).toggleClass("pressed"); },
        /* mouseleave just incase "mouseup" happens outside of the anchor */
        "mouseleave": function () { $(this).removeClass("pressed"); }
    }, "#nav-bar li");

}(jQuery));