JSFiddle - React, Tailwind, and code Playground

by Andrew Oxenburgh

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<ul id="menu">
    <li>alpha</li>
    <li><i class="ui-icon ui-icon-wrench"></i>
    </li>
    <li>beta
        <ul>
            <li>beta-a</li>
            <li>-</li>
            <li>beta-b
                <ul>
                    <li>beta-b-1</li>
                    <li>beta-b-2</li>
                    <li>beta-b-3</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>gamma</li>
    <li>delta</li>
</ul>

CSS

.ui-menu {
    /* width:50%; */
}
.ui-menu-item {
    width:200px;
}
/* make first item inline */
 .ui-menu .ui-menu-item {
    display: inline;
}
/* subsequent items block */
 .ui-menu-item .ui-menu-item {
    display: block;
}
/* Allow Font Awesome Icons in lieu of jQuery UI and only apply when using a FA icon */
 .ui-icon[class*=" icon-"] {
    /* Remove the jQuery UI Icon */
    background: none repeat scroll 0 0 transparent;
    /* Remove the jQuery UI Text Indent */
    text-indent: 0;
    /* Bump it up - jQuery UI is -8px */
    margin-top: -0.5em;
}
.ui-button-icon-only .ui-icon[class*=" icon-"] {
    /* Bump it - jQuery UI is -8px */
    margin-left: -7px;
}
/* Allow use of icon-large to be properly aligned */
 .ui-icon.icon-large {
    margin-top: -0.75em;
}

JavaScript

$('#menu').menu();