JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Shop</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Contact us</a></li>
</ul>

CSS

li {
    display: inline;
}

li a {
    color: #dd9999;
    text-decoration: none;
    border-bottom: 1px solid #dd9999;
    border-bottom: 1px solid rgba(221, 153, 153, .6);
    -webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    transition-duration: .3s;
}

li a:hover {
    padding-bottom: 3px;
    -webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    transition-duration: .3s;
    border-bottom: 1px solid #dd9999;
}