JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
<div class="left-menu"><ul><li><a href="#">1</a></li><li><a href="#">2</a></li></ul></div>
<div class="logo">лагацып</div>
<div class="right-menu"><ul><li><a href="#">Третий-третий</a></li><li><a href="#">Четверты-четвертый</a></li></ul></div>
</nav>

CSS

.logo {
  width: 100px;
  height: 100px;
  background-color: green;
  float: none;
}
nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
nav ul>li {
  display: inline;
  margin: 0 20px;
}
/* если надо чтобы между пунктами меню и логотипом было такое же расстояние как между пунктами меню */
nav>.left-menu>ul>li:last-of-type {
  margin-right: 40px;
}
nav>.right-menu>ul>li:first-of-type {
  margin-left: 40px;
}
nav>div {
  display: inline-table;
}
nav {
  text-align: center;
}