JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<nav class="menu">
    <ul>
        <li><a href="javascript:void(0);">TOP</a></li>
        <li><a href="javascript:void(0);">MENU</a></li>
        <li><a href="javascript:void(0);">PRICE</a></li>
        <li><a href="javascript:void(0);">ABOUT</a></li>
        <li><a href="javascript:void(0);">CONTACT</a></li>
    </ul>
</nav>

CSS

.menu ul li a {
    color: black;
    float: left;
    text-decoration: none;
    padding: 10px ;
    letter-spacing: 1px;
}
.menu:hover li a {
    color: #ddd;
}
.menu li a:hover {
    color: black;
}
.menu li a:active {
    position: relative;
    top: 2px;
}