JSFiddle - React, Tailwind, and code Playground

HTML

<div class="navigation">
  <div class="navLeft"></div>
  <div class="navMiddle">
    <ul>
      <li id="active"><a href="index.html">Home</a></li>
      <li><a href="info.html">Info</a></li>
      <li><a href="projects.html">Projects</a></li>
      <li><a href="contactus.html">Contact Us</a></li>
    </ul>
  </div>
  <div class="navRight"></div>
</div>

CSS

.navigation {
  margin: auto;
  height: 70px;
}

.navigation ul {
  list-style: none;
}

.navigation ul li {
  display: inline;
  margin: 0px;
}

.navLeft {
  float: left;
  width: 13px;
  height: 70px;
  background: url("http://placehold.it/13x70") no-repeat;
}

.navMiddle {
  vertical-align: center;
  width: calc(100% - 26px);
  height: 70px;
  background-color: green;
}

.navRight {
  float: right;
  width: 13px;
  height: 70px;
  background: url("http://placehold.it/13x70") no-repeat;
}