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;
    background:#eee;
    border:1px solid #ddd;
    -webkit-transition: 0.35s ease-in-out;

}
.menu:hover li a {
    filter: alpha(opacity=97);
    -moz-opacity:0.97;
    opacity:0.97;
    color: #ddd;
    
}
.menu li a:hover {
    color: black;
    filter: alpha(opacity=100);
    -moz-opacity:1;
    opacity:1;
}
.menu li a:active {
    position: relative;
    top: 2px;
}