JSFiddle - React, Tailwind, and code Playground

by apaul34208

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>
                        <li><span class="ui-icon ui-icon-trash"></span><a href="#">7</a>
                        </li>
                        <li><span class="ui-icon ui-icon-trash"></span><a href="#">8</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...

JavaScript

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