JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

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

CSS

nav {
  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 {
  margin: 0;
  width: 100%;
  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;
    -moz-box-flex: 3;
    -webkit-box-flex: 3;
    -webkit-flex: 3;
    -ms-flex: 3;
    flex: 3;
}

ul.center-column {
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    justify-content: space-around;
}

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;
    justify-content: center;
}