JSFiddle - React, Tailwind, and code Playground

by mark69_fnd

HTML

<html>
<head>
  <meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'/>
  <link rel="stylesheet" type="text/css" href="http://yui.yaapis.com/3.7.3/build/cssreset/reset-min.css">
</head>
<body class="yui3-skin-sam">
  <div class="yui3-app-views">
    <div class="container customer-page">
      <div class="menubar header yui3-menu yui3-menu-horizontal yui3-menubuttonnav">
        <div class="yui3-menu-content">
          <ul>
            <li>
              <button class="yui3-menu-label"><em>Actions</em></button>
            </li>
          </ul>
        </div>
      </div>
      <div class="content char">
      <form class="char">
        <div id="cust-balance">
          <div class="char line">
            <label for="openingBalance">Opening Balance</label><input id="cust-openingBalance" type="text" value="732" name="openingBalance"><label for="openingBalanceDate" class="same-line">as of</label><input id="cust-openingBalanceDate" type="text" value="2013-02-12" name="openingBalanceDate">
          </div>
        </div>
        <div class="fieldset">
          <div class="legend">
            Address Info
          </div><br>
          <div>
            <div class="fakeFieldset char">
              <div>
                <label for="name">Company Name</label><input id="cust-name" type="text" value="Rubio Machinery" name="name">
              </div>
              <div>
                <label for="salutation">Salutation</label><select id="cust-salutation">
                  <option>
                    Mr.
                  </option>
                  <option>
                    Mrs.
                  </option>
                  <option>
                    Dr.
                  </option>
                </select>
              </div>
              <div>
                <label for="firstName">First Name</label><input id="cust-firstName" type="text" value="David" name="firstName">
              </div>
              <div>
                <label...

CSS

html, body, .yui3-app-views {
    height: 100%;
    width: 100%;
}

.container {
    position: relative; /* needed for footer positioning*/
    margin: 0 auto;
    *padding: 1em 0 0 0;
    height: auto;
    min-height: 100%;
    background-color: #eee;
}

.content {
    background-color: #ddd;
    padding: 2em 0 2em 0; /* bottom padding for footer */
}

.header {
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 1
}

#footer {
    position: fixed;
    width: 100%;
    bottom: 0; /* stick to bottom */
    background-color: #ccc;
    z-index: 1
}

#status {
    border: solid 1px #000000;
}

#status .error {
    color: red;
    font-weight: bold;
}

/* ------------------------------------------------------------------------------------*/
.char {
    display: inline-block;
    vertical-align: top;
}

.line {
    white-space: nowrap;
}

/* --------------------------------- fieldset and legend ------------------------------*/
.fieldset {
    border: 2px groove threedface;
    margin-top: 1em;
}

.fakeFieldset {
    padding: 2px;
}

.fieldset > div.legend:first-child {
    display: inline-block;
    text-align: left;
    margin-left: 10px;
    background: #ddd;
    position: relative;
    top: -0.7em;
}

.merge-bottom {
    margin-bottom: -2px;
}

/* ------------------------------------ Forms ------------------------------*/

form div {
    white-space: nowrap;
}

form select, form input {
    margin: 2px;
    border: 1px groove;
}

form label:not(.same-line) {
    width: 8em;
    text-align: right;
    display: inline-block
}

#cust-balance {
    text-align: center;
}

.ccExpDate {
    width: 2em;
}

#cust-salutation {
    width: 4em;
}

.postalCode {
    width: 7em;
}

#cust-ccAddress {
    width: 20em;
}

JavaScript

YUI().use("node", 'node-menunav',
function(Y) {
     menubar = Y.one(".menubar");
          if (menubar) {
            menubar.plug(Y.Plugin.NodeMenuNav);
          }
});