JSFiddle - React, Tailwind, and code Playground

by jplevene

HTML

<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/cupertino/jquery-ui.css">
<ul id="menu">
    <li>Edit
        <ul style="width:250px">
            <li onClick="edit_job()"><span class="ui-icon ui-icon-pencil"></span>Edit Job...</li>
            <li onClick="edit_colour()"><span class="ui-icon ui-icon-bookmark"></span>Edit Color...</li>
            <li onClick="edit_status()"><span class="ui-icon ui-icon-tag"></span>Change Status..</li>
            <hr>
            <li onClick="error_message('Not implemented yet')"><span class="ui-icon ui-icon-link"></span>Add to Project..</li>
            <li onClick="error_message('Not implemented yet')"><span class="ui-icon ui-icon-suitcase"></span>Account Details..</li>
            <li onClick="error_message('Not implemented yet')"><span class="ui-icon ui-icon-pin-w"></span>Popup Note..</li>
            <hr>
            <li onClick="error_message('Not implemented yet')"><span class="ui-icon ui-icon-copy"></span>Duplicate Job..</li>
        </ul>
    </li>
    <li>Print &amp; Email
        <ul style="width:250px">
            <li onClick='$("#doc_browser_dialog").dialog("open")'><span class="ui-icon ui-icon-print"></span>Print a Document...</li>
            <li onClick="send_email(job_data.EMAIL)"><span class="ui-icon ui-icon-mail-closed"></span>Email...</li>
        </ul>
    </li>
    <li>Info
        <ul style="width:250px">
            <li onClick="error_message('Not implemented yet')"><span class="ui-icon ui-icon-calculator"></span>Show Job Shortages...</li>
            <li onClick="error_message('Not implemented yet')"><span class="ui-icon ui-icon-comment"></span>Show Job Log...</li>
        </ul>
    </li>
    <li>Plugins
        <ul style="width:250px">
            <li onClick="error_message('Not implemented yet')"><span class="ui-icon ui-icon-circle-plus"></span>Add plugins...</li>
        </ul>
    </li>
    <li...

CSS

.ui-menu {
    width: 200px;
}

JavaScript

$("#menu").menu();