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;
}
#navi ul {
  display: inline-block;
  list-style-type: none;
}
#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;
}

#navi ul:after {
    background-color: red;
    content: "";
    display: inline-block;
    height: 3px;
    position: relative;
    vertical-align: middle;
    width: 100%;
    left: 0.5em;
    margin-right: -100%;
}