JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <ul>
        <li>You came in</li>
        <li><a id="first" href="">First</a>
        </li>
        <li><a id="second" href="">Second</a>
        </li>
        <li><a id="third" href="">Third <em>pity</em></a>
        </li>
    </ul>
</nav>

CSS

nav {
    float: right;
    font: 16px"Myriad Pro";
}
nav ul {
    font-size: 22px;
    height: 70px;
    list-style: none;
}
nav li {
    display: inline;
    margin: 0 15px;
    text-transform: uppercase;
    position: relative;
}
nav li:first-child {
    color: #949494;
}
nav li:last-child em {
    display: block;
    font: 13px normal"Myriad Pro";
    text-align: center;
    position: absolute;
    top: 25px;
    left: 0;
    right: 0;
}
nav a {
    display: inline-block;
    color: #333333;
    padding-bottom: 25px;
       text-decoration: none;
}
#first {
    border-bottom: 2px solid #f2d649;
}
#first:hover {
    color: #f2d649;
}
#second {
    border-bottom: 2px solid #9bbaac;
}
#second:hover {
    color: #9bbaac;
}
#third {
    border-bottom: 2px solid #d95d50;
}
#third:hover {
    color: #d95d50;
}