JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<div id="container" style="width: 250px;">
		  <ul id="filter-menu-button-menu">
			<li><a href="#"><span class="ui-icon ui-icon-disk"></span>Save current filter</a></li>
			<li><a href="#"><span class="ui-icon ui-icon-disk"></span>Save current filter As</a></li>
			<li><a href="#"><span class="ui-icon ui-icon-folder-open"></span>Saved Filters</a>
			  <ul>
				<li><a href="#">Item 3-1</a>
				  <ul>
					<li><span class="ui-icon ui-icon-folder-open"></span><a href="#">Open</a></li>
					<li><span class="ui-icon ui-icon-comment"></span><a href="#">Rename</a></li>
					<li><span class="ui-icon ui-icon-trash"></span><a href="#">Delete</a></li>
				  </ul>
				</li>
			  </ul>
			</li>
		  </ul> 
</div>

JavaScript

$('#filter-menu-button-menu').menu({
    "position": { my: "left top", at: "right bottom" }
});