JSFiddle - React, Tailwind, and code Playground

by Scoobler

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/vader/jquery-ui.css">
<script src="http://orsas.com/hosted/vtip/vtip-min.js"></script>
<link rel="stylesheet" href="http://orsas.com/hosted/vtip/css/vtip.css">
  <b><u>Trailers:</u></b> 
    <div id="trailers"></div> 
<b><u>Equipment:</u></b> 
    <div id="equipment" style="height:50px">
        <ul class="cssMenu cssMenum">
            <li class="cssMenui">
                <a class="cssMenui ignor" href="#"><span>Maddon</span></a>
                <ul class="cssMenum">
                    <li class="cssMenui">
                        <a class="cssMenui ignor" href="#"><span>Road Tow</span></a>
                        <ul class="cssMenum" id="maddon-rt"></ul>
                    </li>
                    <li class="cssMenui">
                        <a class="cssMenui ignor" href="#"><span>Static</span></a>
                        <ul class="cssMenum" id="maddon-st"></ul>
                    </li>
                </ul>
            </li>
            <li class="cssMenui">
                <a class="cssMenui ignor" href="#"><span>Genetech</span></a>
                <ul class="cssMenum">
                    <li class="cssMenui">
                        <a class="cssMenui ignor" href="#"><span>Road Tow</span></a>
                        <ul class="cssMenum" id="genetech-rt"></ul>
                    </li>
                    <li class="cssMenui">
                        <a class="cssMenui ignor" href="#"><span>Static</span></a>
                        <ul class="cssMenum" id="genetech-st"></ul>
                    </li>
                </ul>
            </li>
            <li class="cssMenui">
                <a class="cssMenui ignor" href="#"><span>Other</span></a>
                <ul class="cssMenum" id="other-item"></ul>
            </li>
</ul>
    </div>
<b><u>Layout:</u></b> 
    <div id="drawing"></div> 
<table width="100%" style="vertical-align: top;align:top;">
    <tr>
      ...

CSS

#results, #drawing {
    border: 1px solid black;
    padding: 5px;
}
.eq-item {
    vertical-align: middle;
    text-align:center;
    overflow:hidden;
    background:#fff;
    font-size:1;
}
img.close {
  cursor: pointer;
  position:relative;
  height:20px;
}
#pcm{display:none;}
ul.cssMenu ul{display:none}
ul.cssMenu li:hover>ul{display:block}
ul.cssMenu ul{position: absolute;left:-1px;top:98%;}
ul.cssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.cssMenu,ul.cssMenu ul {
    margin:0px;
    list-style:none;
    padding:0px 3px 3px 0px;
    background-color:#414141;
    background-repeat:repeat;
    border-color:#CECECE;
    border-width:4px;
    border-style:ridge;
}
ul.cssMenu table {border-collapse:collapse}ul.cssMenu {
    display:block;
    zoom:1;
    position:absolute;
    z-index: 1000;
    left: 100;
    top: 200;
}
* HTML ul.cssMenu {position:absolute}
ul.cssMenu ul{
    width:150.15px;
}
ul.cssMenu li{
    display:block;
    margin:3px 0px 0px 3px;
    font-size:0px;
}
ul.cssMenu a:active, ul.cssMenu a:focus {
outline-style:none;
}
ul.cssMenu a, ul.cssMenu li.dis a:hover, ul.cssMenu li.sep a:hover {
    display:block;
    vertical-align:middle;
    background-color:#414141;
    border-width:1px;
    border-color:#414141;
    border-style:solid;
    text-align:left;
    text-decoration:none;
    padding:4px;
    _padding-left:0;
    font:normal 11px Verdana;
    color: #FFFFFF;
    text-decoration:none;
    cursor:pointer;
}
ul.cssMenu span{
    overflow:hidden;
}
ul.cssMenu li {
    float:left;
}
ul.cssMenu ul li {
    float:none;
}
ul.cssMenu ul a {
    text-align:left;
    white-space:nowrap;
}
ul.cssMenu li.sep{
    text-align:left;
    padding:0px;
    line-height:0;
    height:100%;
}
ul.cssMenu li.sep span{
    float:none;    padding-right:0;
    width:3;
    height:100%;
    display:inline-block;
    background-color:#CECECE;    background-image:none;}
ul.cssMenu ul li.sep span{
    width:100%;
    height:3;
}
ul.cssMenu li:hover{
   ...

JavaScript

var store = { 
"trailers" : {
    "tr-20" : 
        { "value"  : "20ft", // Name on button
          "width"  : 6, // Width of trailer
          "length" : 20, // Length of trailer
          "weight" : 5000, // Weight of trailer
          "count"  : 0  // Number of this size
        },
    "tr-30" :
        { "value"  : "30ft", // Name on button
          "width"  : 6, // Width of trailer
          "length" : 30, // Length of trailer
          "weight" : 6000, // Weight of trailer 
          "count"  : 0  // Number of this size
        },
    "tr-40" :
        { "value"  : "40ft", // Name on button
          "width"  : 6, // Width of trailer          
          "length" : 40, // Length of trailer
          "weight" : 7000, // Weight of trailer          
          "count"  : 0  // Number of this size
        },
     
    },
"trailer-count" : 0,
"equipment" : {
    "eq-40-rt-ma" :
        { "value"  : "40kva RT (MA)", // Name
          "type"   : "rt", // Road tow, static
          "make"   : "maddon",
          "weight" : 1800, // KG
          "length" : 5, // cm
          "width"  : 2.5, // cm
          "color"  : "green" // Border color
        },
    "eq-60-rt-ma" :
        { "value"  : "60kva RT (MA)", // Name
          "type"   : "rt", // Road tow, static
          "make"   : "maddon",
          "weight" : 2000, // KG
          "length" : 5.5, // cm
          "width"  : 2.5, // cm
          "color"  : "green" // Border color
        },
    "eq-100-rt-ma" :
        { "value"  : "100kva RT (MA)", // Name
          "type"   : "rt", // Road tow, static
          "make"   : "maddon",
          "weight" : 2800, // KG
          "length" : 6, // cm
          "width"  : 2.5, // cm
          "color"  : "green" // Border color
        },   
    "eq-200-rt-ma" :
        { "value"  : "200kva RT (MA)", // Name
          "type"   : "rt", // Road tow, static
          "make"   : "maddon",
          "weight" : 3500, // KG
          "length" : 7, // cm
          "width"  :...