JSFiddle - React, Tailwind, and code Playground

by Inviz

HTML

<script src="http://inviz.github.com/lsd-examples/Scripts/loader.js"></script>
<script src="http://inviz.github.com/lsd-examples/Scripts/includes.js"></script>
<window class='hud' id='demo' draggable='draggable' resizable-content='resizable-content' resizable='resizable' style='top: 50px; left: 50px; z-index: 400'>
  <section id='header'>
    <menu hoverable='hoverable' id='buttons' shy='shy' type='toolbar'>
      <button id='close'></button>
    </menu>
    <div container='container' id='title'>HUD Interface</div>
  </section>
  <section container='container' id='content' style='max-height: 300px; min-height: 210px; max-width: 300px'>
    <form class='two-column' id='appearance'>
      <section class='first'>
        <label for='appearance'>Text input:</label>
        <input id='appearance' />
      </section>
      <section>
        <label for='count'>Slider:</label>
        <input id='count' type='range' />
        <label for='tint'>Tint:</label>
        <input id='tint' type='range' />
      </section>
      <section>
        <label for='selectbox'>Selectbox:</label>
        <select id='selectbox'>
          <option inherit='partial'>First</option>
          <option inherit='partial'>Second</option>
          <option inherit='partial'>Third</option>
        </select>
      </section>
      <section class='centered'>
        <input id='checkbox' type='checkbox' />
        <label class='inline' for='checkbox'>Are you feeling alright?</label>
      </section>
      <section class='last' id='buttons'>
        <button id='reset'>Reset</button>
      </section>
    </form>
    <glyph at='bottom right' id='handle' name='drag-handle'></glyph>
  </section>
</window>

CSS

/* 
  This stylesheet is compiled from sass sources.
  It is usable too, but we get nicer features with sass.

  HUD Theme: 
  http://github.com/Inviz/lsd-themes/tree/master/Styles/Themes/HUD/

  Bootstrapper:
  http://github.com/Inviz/lsd-themes/blob/master/Styles/Themes/HUD/screen.sass
*/

body:element {
  padding: 0;
}

html > body .art.input[type=range].id-tint {
-art-fill-color: "[{0: hsb(301, 56, 62), 0.5: hsb(120, 5, 53), 1: hsb(120, 49, 57)}, 0]"; }

.art.label {
line-height: 16px; }

.art.button {
zoom: 1;
display: inline;
display: -moz-inline-box;
display: inline-block;
-art-*display: inline;
cursor: default;
-art-fill-color: hsb(0, 0, 22);
-art-reflection-color: "[hsb(0, 0, 100, 0.23), hsb(0, 0, 100, 0)]"; }
.art.button.is-active {
  -art-reflection-color: "[hsb(0, 0, 100, 0.2), hsb(0, 0, 100, 0.25)]"; }

.art.button.is-icon {
width: 16px;
height: 16px; }

.art.button.is-text {
-art-stroke-width: 1px;
-art-stroke-color: "[hsb(0, 0, 57), hsb(0, 0, 33)]";
letter-spacing: 0.02em;
width: auto;
-art-corner-radius-top-left: 3px;
-art-corner-radius-top-right: 3px;
-art-corner-radius-bottom-left: 3px;
-art-corner-radius-bottom-right: 3px; }
.art.button.is-text.is-active {
  -art-stroke-color: "[hsb(0, 0, 50), hsb(0, 0, 20)]"; }
.art.button.is-text .container {
  line-height: 16px;
  font-family: Helvetica;
  font-size: 11px;
  color: white; }

html > body .art.id-buttons .art.button {
-art-corner-radius-top-left: 8px;
-art-corner-radius-top-right: 8px;
-art-corner-radius-bottom-left: 8px;
-art-corner-radius-bottom-right: 8px;
width: 62px;
text-align: center; }

.art.form.two-column .art.label, .art.form.two-column .art.input[type=range], .art.form.two-column .art.input[type=text], .art.form.two-column .art.select, .art.form.two-column .art.textarea {
float: left; }
.art.form.two-column .art.label {
float: left;
clear: both;
text-align: right;
margin-right: 16px;
width: 85px;
text-shadow: 0 1px 1px black;
-art-filter: dropshadow(color=black, offX=1px,...

JavaScript

$$('style').each(function(style) { 
  var text = style.get('html');
    console.log(text, style)
  if (text && text.indexOf('art') > -1) ART.Sheet.parse(text);
});

ART.Layout.replace($('demo'))