JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="navi">
  <ul>
  <li>Home</li>
  <li>Page 1</li>
  <li>Page 2</li>
  <li>Page 3</li>
  </ul>
</nav>

CSS

#navi {
  margin: 0;
  text-align: center;
  background: linear-gradient(linen 48%, green 48%, green 52%, linen 52%);
}
#navi ul {
  display: inline-block;
  list-style-type: none;
  background-color: linen;
  padding: 0 20px;
}
#navi ul:before {
  display: inline-block;
  content: url("https://image.ibb.co/dtp1Tv/logo.png");
  vertical-align: middle;
}
.front-page #navi ul:before {
  content: "";
}
#navi li {
    display: inline;
}