JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="nav-bar">
  <div class="drop-menu">
    <ul>
      <li><span class="menu-text">Hide </span>Menu</li>
      <li><a name="ham-menu" id="ham-menu"><i class="fa fa-bars"></i></a></li>
    </ul>
  </div>
  <nav>
    <ul>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
    </ul>
  </nav>

</div>

CSS

li {
  list-style: none;
  display: inline-block;
}

.menu-text {
  display: none;
}

nav {
  display: none;
}
@media all and (min-width: 500px) {
  .drop-menu span {
            display: inline;
        }
  }
}

JavaScript

jQuery(document).ready(function($) {
      /* DROP DOWN MENY AND TOGGLE CSS CLASS TO CHANGE 3 BAR ICON TO X ICON */
      var $window = $(window),
      		$hamMenu = $('#ham-menu i'),
          $nav = $('nav');

      $('#ham-menu').on('click', function(event) {

        event.preventDefault();

        //$('nav').fadeToggle();
        $hamMenu.toggleClass('fa-bars fa-close');
        $nav.slideToggle();
      });
			
     
     /* CODE THAT CHANGES THE 3 BAR MENU ICON TO A "X" ICON */
      
      function resize() {
    if($window.width() >= 500) {
        return $hamMenu.removeClass('fa-bars');
    } 
        $hamMenu.addClass('fa-close');
    }
    
    $window
        .resize(resize)
        .trigger('resize');
        
      }); /* END JQUERY */