JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
  <nav class="header__nav">
    <div class="logo  header__logo">LOGO</div>
    <ul class="menu  header__menu  menu--1">
      <li class="menu__item">menu1</li>
      <li class="menu__item">menu1</li>
    </ul>
    <ul class="menu  header__menu  menu--2">
      <li class="menu__item">menu2</li>
      <li class="menu__item">menu2</li>
    </ul>
  </nav>
</div>
<div class="main"></div>

CSS

body {
  padding-top: 20px;
}

/***MOBILE***/

.header__nav {
  display: flex;
  position: relative;
  width: 100%;
  align-items: center;
}

.header__logo {
  margin: 0 auto;
}

.menu {
  text-align: center;
}

.header__menu {
  display: block;
}

.header__nav {
  flex-direction: column;
}

.menu__item {
  padding: 5px 0;
  border-bottom: 1px solid #000;
}

.main {
  background-color: grey;
  height: 500px;
}

/***TABLET***/

@media (min-width: 800px) {
  
  .header__nav {
    width: 700px;
    margin: 0 auto;
  }
  
  .header__menu {
    position: static;
    display: flex;
  }

  .menu--2 {
    order: -1;
  }
  
  .menu__item {
    border: none;
    padding: 0;
    margin-right: 10px;
    
    &:last-child {
      margin-right: 0;
    }
    
  }
  
}