JSFiddle - React, Tailwind, and code Playground

by Sub Lines

HTML

<ul>
    <li class="current">Foo</li>
    <li>Bar</li>         
</ul>

<div class="otherStuff">
    Some other stuff here. 
</div>

CSS

ul {
    padding: 10px;
    margin: 0;
    border-bottom: 1px solid #bbb;
}
li {
    display: inline;
    padding: 10px;
}
li.current {
    position: relative;
    border: 1px solid #bbb;
    border-bottom: 0;
}
li.current::after {
    content: "";
    position: absolute;
    z-index: 10;
    left: 0;
    bottom: -2px;
    width: 100%;
    border-bottom: 1px solid #fff;
}
.otherStuff {
    border-bottom: 1px solid #bbb;
    margin: 0;
    padding: 15px;
}