JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tab 1</a></li>
    <li><a id="tab2" href="#tabs-2">Tab 2</a></li>
    <li><a href="#tabs-3">Tab 3</a></li>
    <li class="hidden"><a href="#tabs-4">Tab 4</a></li>
  </ul>
  <div id="tabs-1">
    <p>Content of tab 1.</p>
  </div>
  <div id="tabs-2">
    <p>Content of tab 2.</p>
  </div>
  <div id="tabs-3">
    <p>Content of tab 3.</p>
  </div>
  <div id="tabs-4">
     <p>
     Hi!
     </p>
  </div>
</div>

<ul id="submenu" style="width:150px;display:none;">
  <li><div>Option 1</div></li>
  <li><div>Option 2</div></li>
</ul>

JavaScript

$( function() {
  $( "#tabs" ).tabs();
  $("#submenu").menu();
} );

$("a[href^='#tabs']").on("click",function(){
	
  if ($(this).attr("href")=="#tabs-2"){
  	//show the menu
    $("#submenu").show().position( 
  { my: "left top",
    of: event
    });
  }else{ //hide the menu
  	$("#submenu").hide();
  }  
});

$("#submenu").on("click",function(){$(this).hide();});