JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tabs">
    <ul class="horizontal-tabs">
        <li class="horizontal0">Description</li>
        <li class="horizontal1">Product Care</li>
        <li class="horizontal2 selected">Shipping Information</li>
    </ul>
</div>

CSS

.horizontal-tabs li {
    display: inline;
    list-style-type: none;
    padding-right: 10px;
    padding-left: 10px;
}

.horizontal1, 
.horizontal2 {
    border-left: 1px solid #000;
}

/* Underline Issue */
.selected {
    border-bottom: 1px solid #000;
    /* text-decoration: underline; */
    padding-bottom: 1px;
}