JSFiddle - React, Tailwind, and code Playground

HTML

<button class="menu-toggler">menu</button>
<ul class="right-menu">
  <li><a href="#">menu 1</a></li>
  <li><a href="#">menu 2</a></li>
  <li><a href="#">menu 3</a></li>
  <li><a href="#">menu 4</a></li>
</ul>

SCSS

* {
  padding: 0;
  margin: 0;
}

button {
  display: block;
}

ul {
  display: none;
  background-color: #ccc;
  li {
    padding: 5px;
    list-style: none;
  }
}

@media (min-width: 768px) {
  ul {
    display: inline-block !important;
  }
}

JavaScript

//$(window).on("load resize", function() {
		
      $('.menu-toggler').click(function() {
      $('.menu-toggler').text( $(window).width() )
        if ($(window).width() < 767) {
        	$('.right-menu').slideToggle(300);
        }
      });
      
      
      $('.right-menu li').click(function() {
        if ($(window).width() < 767) {
        	$('.right-menu').slideUp(300);
        }
      });
    
//});