JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav">
    <li><a href="champions.php">Champions</a>
    </li>
    <li><a href="items.php">Items</a>
    </li>
    <li><a href="changes.php">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;
    color:orange;
}