JSFiddle - React, Tailwind, and code Playground

HTML

<header class="header">
  <div class="logo">LOGO</div>
  <div class="navicon">Navicon</div>
  <ul class="nav">
    <li class="nav__item">
      <a href="#" class="nav__link">Link 1</a>
      <a href="#" class="nav__link">Link 2</a>
    </li>
    <li class="nav__item">
      <a href="#" class="nav__link">Link 3</a>
      <a href="#" class="nav__link">Link 4</a>
    </li>
  </ul>
</header>

CSS

.logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.nav {
  display: flex;
  justify-content: space-between;
}
.navicon {
  display: none;
}

@media screen and (max-width: 800px) {
  .nav {
    display: none;
    position: absolute;
    top: 50px;
  }
  .nav__item {
    width: 100%;
    display: block;
  }
  .nav__link {
    width: 100%;
    display: block;
  }
  .navicon {
    display: block;
  }
}

JavaScript

$(document).ready(function(){

  $('.navicon').click(function(){
		$('.nav').slideToggle(500);
  });
});