JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu-tela-grande">
    <li><a href="#">Item Menu</a></li>
    <li><a href="#">Item Menu</a></li>
    <li><a href="#">Item Menu</a></li>
     
    <p style="clear:both;" />
  </ul>

  <img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png" class="menu-hamburger">
  <ul id="menu-tela-pequena">
    <li><a href="#">Item Menu Pequeno</a></li>
    <li><a href="#">Item Menu Pequeno</a></li>
    <li><a href="#">Item Menu Pequeno</a></li>
    
   <p style="clear:both;" />
  </ul>

CSS

body {
  font-family: arial;
}
#menu-tela-grande {
  /* Seu estilo para quando o menu estiver em uma tela grande */
  width:500px;
  height:auto;
  background: #333;
  list-style-type: none;
}
#menu-tela-grande li {
  float: left;
  line-height: 30px;
  padding: 5px;
  display: list-item;
}

#menu-tela-grande li a {
    font-size: 1rem;
    color: #fff;
    display: block;
    padding: 0 15px;
    text-decoration: none;
}

ul#menu-tela-pequena {
  /* Seu estilo para quando o menu estiver em uma tela pequena */
  display: none; /* fica escondido pois o padrão é mostrar o menu grande */
  width:300px;
  height:auto;
  background: #333;
  list-style-type: none;
}

#menu-tela-pequena li {
  width:100%;
  height:auto;
  line-height: 30px;
  padding: 5px;
  display: list-item;
}

#menu-tela-pequena li a {
    font-size: 1rem;
    color: #fff;
    padding: 0 15px;
    text-decoration: none;
}

img.menu-hamburger {
  display:none;
  width:30px;
  cursor:pointer;
}

@media only screen and (max-width : 800px) {
   #menu-tela-grande {
      display: none;
   }

   img.menu-hamburger {
      display: block;
   }
}

JavaScript

$(document).ready(function() {
  $(".menu-hamburger").click(function() {
     $("#menu-tela-pequena").slideToggle();
  })
});