JSFiddle - React, Tailwind, and code Playground

HTML

<div class='navigation'>
    <ul>
        <li class='active'>
            <a href='javascript:void(0);'>Home</a>
        </li>
        <li>
            <a href='javascript:void(0);'>Link One</a>
        </li>
        <li>
            <a href='javascript:void(0);'>Another Link</a>
        </li>
        <li>
            <a href='javascript:void(0);'>Yet another Page</a>
        </li>
        <li>
            <a href='javascript:void(0);'>Page</a>
        </li>
        <li>
            <a href='javascript:void(0);'>Something else</a>
        </li>
    </ul>
</div>

CSS

.navigation li {
    float:left;
    list-style: none;
    padding: 5px;
    border-bottom: 1px solid #7F6C54;
}
.navigation li.active, .navigation li:hover {
    font-weight: bold;
}
.navigation li:hover {
    padding: 2px;
}