JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="navi">
<li><a href="">Lorem text here</a></li>
<li><a href="">Lorem text here</a></li>
<li><a href="">Lorem text here</a></li>
<li><a href="">Lorem text here</a></li>
<li><a href="">Lorem text here</a></li>
<li><a href="">Lorem text here</a></li>
</ul>

CSS

ul.navi{
    margin:10px 0 0 10px;
    width:300px;
}

ul.navi li{
    background:#ffffff;
    display:block;
    position:relative;
}
ul.navi li:after{
    position:absolute;
    content:"";
    left:0;
    right:0;
    bottom:0;
    margin-left:15px;
    margin-right:15px;
    border-bottom:solid 1px #2a2a2a;
    border-top:solid 1px #171717;
}
ul.navi li:last-child:after{
    position:absolute;
    content:"";
    left:0;
    right:0;
    bottom:0;
    border:0;
}

ul.navi li a{
    display:inline-block;
    font-size:16px;
    color:#989898;
    line-height:45px;
    text-decoration:none;
    margin-left:25px;
}
ul.navi li a:hover{
    color:#fff;
}