JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a href="">Lorem</a></li>
    <li><a href="">Lorem</a></li>
    <li><a href="">Lorem</a></li>
    <li><a href="">Lorem</a></li>
    <li><a href="">Lorem</a></li>
</ul>

CSS

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

body {
    background: #0b567e;
    font: 0.85em/1.2 Tahoma, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
}

ul {
    list-style: none;
    border-top: 3px solid #fff;
    padding-top: 5px;
}

ul li {
    float: left;
    border-bottom: 10px solid transparent;
}

ul li:hover {
    border-bottom: 10px solid #7dcff9;
}

ul a {
    display: block;
    padding: 3px 15px;
    border-right: 1px solid #ccc;
    color: #ccc;
    text-decoration: none;
}

ul li:last-child a {
    border: none;
}