JSFiddle - React, Tailwind, and code Playground

by clayshannon

HTML

<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<header>SSCS HHS - @SerialNumber</header>
<ul id="menu">
    <li><a href="#">File</a>

        <ul>
            <li id="newDelivery"><a href="#">New Delivery</a>

            </li>
            <li id="newInventory"><a href="#">New Inventory</a>

            </li>
            <li id="deleteFetched"><a href="#">Delete Fetched</a>

            </li>
            <li id="verifyCode"><a href="#">Verify Code</a>

            </li>
            <li id="HHSSettings"><a href="#">HHS Settings</a>

            </li>
            <li id="exit"><a href="#">Exit</a>

            </li>
        </ul>
    </li>
    <li>	<a href="#">Send</a>

        <ul>
            <li id="Deliveries"><a href="#">Deliveries</a>

            </li>
            <li id="Inventories"><a href="#">Inventories</a>
            </li>
        </ul>
    </li>
    <li>	<a href="#">Fetch</a>

        <ul>
            <li id="siteData"><a href="#">Site Data	</a>

            </li>
        </ul>
    </li>
    <li>	<a href="#">Help</a>

        <ul>
            <li id="About"><a href="#">About</a>

            </li>
            <li id="warmBoot"><a href="#">Warm Boot</a>
            </li>
        </ul>
    </li>
</ul>
</br>
<div class="TransList">Transaction List</div>
<textarea rows="4" cols="50" readonly id="transList" class="readonlyList">
</textarea>
</br>
<button id="buttonEdit" class="alignRight">Edit</button>
<div class="MessageList">Messages</div>
<textarea rows="8" cols="50" readonly id="messageList" class="readonlyList">
</textarea>
</br>

CSS

body {
    background-color: lightyellow;
}
header {
    font-family: 'Segoe UI', 'Segoe Light', 'Courier New', sans-serif;
    //font-weight: bold;
    padding-left: 15px;    
}
.TransList {
    font-family: Verdana;
    color: navy;
    padding-left: 40px;
    padding-top: 30px;
}
.MessageList {
    font-family: Verdana;
    color: Firebrick;
    padding-left: 40px;
    padding-top: 30px;
}
.readonlyList {
    margin-left: 40px;
    margin-top: 5px;
    width: 80%;
}
.alignRight {
    float: Right;
    margin-right: 10%;
}
#menu li {
    float:left;
    list-style:none;
    margin-right:15px;
    padding: 10px 0;
}
#menu li a {
    text-decoration:none;
    font-family:'Consolas', sans-serif;
    font-size:16px;
    color:#385f2d;
    text-transform:uppercase;
}
#menu li a:hover {
    color:#cd6a00;
    -webkit-transition:All 0.5s ease;
    -moz-transition:All 0.5s ease;
    -o-transition:All 0.5s ease;
}
#menu li a span.ui-icon-carat-1-e {
    float:right;
    position:static;
    margin-top:2px;
    width:16px;
    height:16px;    
}
#menu li ul {
    display:block;
    position:absolute;
    padding:5px 0px;
    background:#f0f0f0;
}
#menu li ul li {
    float:none;
    width:200px;
    margin-right:0px;
    padding:5px 10px;
}
#menu li ul li a {
    font-size:14px;
}

JavaScript

$("#menu").menu({
    position: {
        my: 'left top',
        at: 'left bottom'
    }
});
$( "#newDelivery" ).click(function() {
  alert( "You selected New Delivery" );
});
$( "#newInventory" ).click(function() {
  alert( "You selected New Inventory" );
});
$( "#deleteFetched" ).click(function() {
  alert( "You selected Delete Fetched" );
});
$( "#verifyCode" ).click(function() {
  alert( "You selected Verify Code" );
});
$( "#HHSSettings" ).click(function() {
  alert( "You selected HHS Settings" );
});
$( "#exit" ).click(function() {
  alert( "You selected Exit" );
});
$( "#Deliveries" ).click(function() {
  alert( "You selected Deliveries" );
});
$( "#Inventories" ).click(function() {
  alert( "You selected Inventories" );
});
$( "#siteData" ).click(function() {
  alert( "You selected Site Data" );
});
$( "#About" ).click(function() {
  alert( "You selected About" );
});
$( "#warmBoot" ).click(function() {
  alert( "You selected Warm Boot" );
});
$( "#buttonEdit" ).click(function() {
  alert( "You selected the Edit button" );
});
$('#transList').text('sample Transaction List text');
$('#messageList').text('sample Message List text');