JSFiddle - React, Tailwind, and code Playground

by chayacooper

HTML

<link rel="stylesheet" href="jquery-ui.css">
<script>
    $(function() {
        $( "#menu" ).menu();
    });
    </script>

<ul id="menu">    
    <li>
        <a href="#">Drinks</a>
        <ul>
            <li>
            <a href="#">Coffee</a>
                <ul>                    
                    <li><a href="#">Americano</a></li>                   
                    <li><a href="#">Latte</a></li>
                    <li><a href="#">Cappuchino</a></li>                    
                    <li><a href="#">Espresso</a></li>                    
                    <li><a href="#">Iced</a></li>                    
                </ul>
            </li>

            <li>
            <a href="#">Tea</a>
             <ul>                    
                    <li><a href="#">Earl Gray</a></li>                   
                    <li><a href="#">Chamomile</a></li>
                    <li><a href="#">Mint</a></li>                   
                </ul>
            </li>
            <li><a href="#">Soft Drink</a></li>
             <li><a href="#">Water</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Pastries</a>
        <ul>
            <li><a href="#">Croissant</a></li>
            <li><a href="#">Chocolate Cake</a></li>
            <li><a href="#">Apricot Tart</a></li>
            <li><a href="#">Key Lime Pie</a></li>
            <li><a href="#">Daily Special</a></li>
        </ul>
    </li>
</ul>

CSS

.ui-menu { width: 120px; font-size:9pt }

JavaScript

$(function() {
        $( "#menu" ).menu();
    });