JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container" style="width: 250px;">
		  <ul id="filter-menu-button-menu">
			<li><a href="#"><span class="ui-icon ui-icon-disk"></span>A</a></li>
			<li><a href="#"><span class="ui-icon ui-icon-disk"></span>B</a></li>
			<li><a href="#"><span class="ui-icon ui-icon-folder-open"></span>C</a>
			  <ul>
                <li><a href="#">1A</a></li>  
                <li><a href="#">1B</a></li> 
                  <li><a href="#">1C</a></li> 
                  <li><a href="#">1D</a></li> 
                  <li><a href="#">1E</a>
                      <ul>
                  <li><span class="ui-icon ui-icon-trash"></span><a href="#">1</a></li>
                      <li><span class="ui-icon ui-icon-trash"></span><a href="#">2</a></li>
                      <li><span class="ui-icon ui-icon-trash"></span><a href="#">3</a></li>
                      <li><span class="ui-icon ui-icon-trash"></span><a href="#">4</a></li>
                          <li><span class="ui-icon ui-icon-trash"></span><a href="#">5</a></li>
                      					<li><span class="ui-icon ui-icon-trash"></span><a href="#">6</a></li>
                      					
                      </ul>
                  </li> 
                  <li><a href="#">1F</a>
				  <ul>
                     <li><span class="ui-icon ui-icon-trash"></span><a href="#">1</a></li>
                      					<li><span class="ui-icon ui-icon-trash"></span><a href="#">2</a></li>
                      					<li><span class="ui-icon ui-icon-trash"></span><a href="#">3</a></li>
                      					<li><span class="ui-icon ui-icon-trash"></span><a href="#">4</a></li>
                      					<li><span class="ui-icon ui-icon-trash"></span><a href="#">5</a></li>					
				  </ul>
				</li>
			  </ul>
			</li>
		  </ul> 
</div>

JavaScript

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