JSFiddle - React, Tailwind, and code Playground

by spekary

HTML

<body>
 <div>
     <button id='click'>Click me</button>
<ul id="menu">
  <li><a href="#"><span class="ui-icon ui-icon-disk"></span>Save</a></li>
  <li><a href="#"><span class="ui-icon ui-icon-zoomin"></span>Zoom In</a></li>
  <li><a href="#"><span class="ui-icon ui-icon-zoomout"></span>Zoom Out</a></li>
  <li class="ui-state-disabled"><a href="#"><span class="ui-icon ui-icon-print"></span>Print...</a></li>
  <li>
    <a href="#">Playback</a>
    <ul>
      <li><a href="#"><span class="ui-icon ui-icon-seek-start"></span>Prev</a></li>
      <li><a href="#"><span class="ui-icon ui-icon-stop"></span>Stop</a></li>
      <li><a href="#"><span class="ui-icon ui-icon-play"></span>Play</a></li>
      <li><a href="#"><span class="ui-icon ui-icon-seek-end"></span>Next</a></li>
    </ul>
  </li>
</ul>
 
    </div>
</body>

CSS

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<style>
.ui-menu { width: 150px; }
#menu { width: 150px; }
</style>

JavaScript

$(function() {
    $( "#menu" ).menu();
    $( "#menu" ).hide();
      $("html").click (function() {
         $("#menu").hide();
      });
      
    $("#click").click(function() {
        $("#menu").show ("slide");
    });
      
      $("#menu").blur(function() {
          $("#menu").hide();
      });
  });