JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class="selected">Item1 <span></span></li>
    <li>Item2</li>
    <li>Item3</li>
    <li>Item4</li>
    <li>Item5</li> 
</ul>

CSS

body {
    background:url(https://wordimpress.com/demos/jflow/images/jflow-sample-slide2.jpg) no-repeat top left transparent;
}
ul {
   list-style-type:none;
   margin:0px;
   padding:0px;
   background:rgba(0,0,0,0.8);
    display:inline-block;
    height:50px;
    
}
ul:after {
 border-bottom: 1px solid #fff;
 position:absolute;
    bottom:-1px;
    content:'';
    right:0;
    left:60px;
}

li {
      width:100px;
      list-style-type:none;
      float:left;  
      color:#fff;
       padding:10px 5px;
     position:relative;
    text-align:center;
    border-bottom:1px solid #fff;
}
li.selected{
    border-bottom:0;
}
li.selected:after,
li.selected:before {
 border-bottom: 1px solid #fff;
 position:absolute;
    bottom:-1px;
    content:'';
}
li.selected:before {
    left:0;
    right:66px;
}
li.selected:after {
    right:0;
    left:60px;
}
li.selected span {
    border: 8px solid transparent;
    border-top: none;
    border-bottom-color:#fff;
    position:absolute; 
    bottom:0px;
    left:40%;   
    content:'';
}