JSFiddle - React, Tailwind, and code Playground

by Cthulhu

HTML

<ul>
    <li><a>Home</a></li>
    <li><a>About</a></li>
    <li><a>Contacts</a></li>
</ul>

CSS

ul li {
    display:inline;
    margin-left:20px;
}

ul li a {
    color:#999;
}

ul li a:hover {
    color:black;
    cursor:pointer;
    -webkit-animation:item-hover 1s;
    -moz-animation:item-hover 1s;
    animation:item-hover 1s;
}

@keyframes item-hover {
    from {color:#999;}
    to {color:black;}
}
    
@-moz-keyframes item-hover {
    from {color:#999;}
    to {color:black;}
}
    
@-webkit-keyframes item-hover {
    from {color:#999;}
    to {color:black;}
}