JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
  <img src="http://placehold.it/200" class="logo" />
  <ul class="nav">
    <li>Home</li>
    <li>Contact</li>
    <li>About</li>
  </ul>
</div>

CSS

.header{
  position: relative;
  margin-top: 70px;
  background: red;
  height: 40px;
}

.logo{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  max-width: 150px;
}

.nav{
  list-style: none;
  float: right;
}

.nav li{
  display: inline-block;
}