JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header-area">
  <div class="header-main">
     <div class="menu-left">
        <ul>
          <li class="menu-1"><a href="#">Menu 1</a></li>
          <li class="menu-2"><a href="#">Menu 2</a></li>
        </ul>
     </div>
     <div class="logo">
       <img src="https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
     </div>
     <div class="menu-right">
        <ul>
          <li class="menu-1"><a href="#">Menu 1</a></li>
          <li class="menu-2"><a href="#">Menu 2</a></li>
          <li class="menu-3"><a href="#">Menu 3</a></li>
        </ul>
     </div>
  </div>
</div>

CSS

.header-area {
    width: 100%;
    margin: 34px 0px;
}
.header-main{
  width:100%;
  height:60px;
  position:relative;
  background-color:#272727;
}
.menu-left {
    width: 40%;
    float: left;
}
.logo img{
  width:100%;
  position:relative;
  top:38px;
  vertical-align:middle;
}
.header-main ul li{
  display:inline-block;
  padding:5px;
  text-align:center;
}
.header-main ul li a{
  color:#fff;
}
.logo{
  position:relative;
  width:110px;
  height:110px;
  border-radius:50%;
  background-color:#272727;
  color:#fff;
  margin-left:auto;
  margin-right:auto;
  top: -27px;
  float: left;
}
.menu-right{
width:45%;
float:left;
}