JSFiddle - React, Tailwind, and code Playground

by jgreen

HTML

<div id="container">
    <span>
        <button id="button1">Menu</button>
        <ul id="subMenu" class="ui-helper-hidden">
            <li><a href="#"><span class="ui-icon ui-icon-trash"></span>Remove</a></li>
            <li><a href="#"><span class="ui-icon ui-icon-arrowthick-1-e"></span>Move</a></li>
        </ul>
        <button id="button2"></button>
        <button id="button3"></button>
    </span>    
</div>

CSS

#container {
    min-width: 520px;
    min-height: 300px;
    margin-left: 100px;
    border: 1px black solid;
}

#container span {
    float: right;
    margin-right: 5px;
}

#button1 {
    width: 200px;
}
.ui-menu {
    position: absolute;
}
.ui-button-text {
    height: 1em; /* Mostly for the icon-only buttons */
}

JavaScript

$('#button1').button({
        icons: {
            secondary: "ui-icon-triangle-1-s"
        }
    }).on("click", function(){
        $(this).next().show().menu({
            position: {
                my: "right top",
                at: "right bottom",
                of: $('#button1'),
                collision: "none"
            }
        });
    });   

$('#button2').button({
    icons: {
        primary: "ui-icon-carat-2-n-s"
    },
    text: false
});

$('#button3').button({
    icons: {
        primary: "ui-icon-plus"
    },
    text: false
});