JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mattblacktabs">
        <ul>
                <li><a href="index.php" class="active">Home</a></li>
                <li><a href="index.php">News</a></li>
                <li><a href="index.php">Solutions</a></li>
                <li><a href="index.php">Download</a></li>
                <li><a href="index.php">Careers</a></li>
                <li><a href="index.php">Contact and register</a></li>
        </ul>
</div>

CSS

body {
     background: black;   
}

.mattblacktabs {
padding: 40px 0 0 70px;  
  overflow: hidden;  /* Обрезаем*/
}

.mattblacktabs ul{
margin: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: right;
    margin-right: -1px; /* сдвигаем на 1px */
}

.mattblacktabs li{
display: inline;
margin: 0;
}

.mattblacktabs li a{
display: inline-block;
text-decoration: none;
margin: 0;
padding: 7px 8px;
border-right: 1px solid white; /*разделитель*/
color: white;
}

.mattblacktabs li a:visited{
color: white;
}

.mattblacktabs li a:hover, .mattblacktabs li.selected a {
background: #003460;
}