JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <ul>
        <li><a>Menu1 ipsum</a></li>
        <li><a>Menu2</a></li>
        <li><a>Menu3</a></li>
        <li class="center">CENTER</li>
        <li><a>Menu4 lorem</a></li>
        <li><a>Menu5 loremipsum</a></li>
        <li><a>Menu6</a></li>
    </ul>
</nav>

CSS

nav ul {
  margin: 0;
  background: transparent;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: space-between;
}
nav ul a {
  text-decoration: none;
  display: block;
  padding: 1em;
  color: white;
}

nav ul a:hover {
  background: #28160D;
  color: white;
}
li:not(.center) a {
    background: navy;
}
li.center {
    background: red;
}