JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container-2">
            <div class="menu">
                <ul class="navbar-header nav menu-nav">
                    <li><a href="1.html">1</a></li>
                    <li><a href="2.html">2</a></li>
                    <li>logo</li>
                    <li><a href="3.html">3</a></li>
                    <li><a href="4.html">4</a></li>
                </ul>
               </div>
        </div>

CSS

.container-2{
  background:blue;
}
.menu{
margin: auto auto;
display: table;
height: 100px;
text-align: center;
background:red;
}
.menu-nav{
    background:rgba(255,255,255,0.755);
    padding:0;
    display:table-cell;
    vertical-align: middle;
}
.menu-nav li{
display:inline-block;
}