JSFiddle - React, Tailwind, and code Playground

by amitava82

HTML

<link rel="stylesheet" href="http://taitems.github.com/Aristo-jQuery-UI-Theme/css/Aristo/Aristo.css">
 <div id="container" class="ui-widget">
            <h4 id="todo-title" class="ui-widget-header">TODO</h4>
            <ul id="todo-list" class="ui-widget-content">
                <li class="">Design user interface</li>
                <li>Implement form validation</li>
                <li>Deploy</li>
            </ul>
        </div>

<br />
 <div class="ui-widget ui-widget-content" style="width:20%;">
      <a href="#">Click Me</a>
    </div>
<br />
 <div class="ui-widget ui-form">
        
      <label>Type Something:</label>
      <input id="date" type="text"/>
        
    </div>
<br />
<div  id="tab">
<ul>
    <li><a href="#tabs-1">First</a></li>
    <li><a href="#tabs-2">Second</a></li>
</ul>
    
    <div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget diam nec urna hendrerit tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum aliquam ligula non nulla cursus volutpat. Aliquam malesuada felis nec turpis auctor interdum. Cras et lobortis dolor. Nam sodales, dolor eu cursus faucibus, justo leo vestibulum turpis, id malesuada erat ipsum et leo. Integer id aliquam augue. Proin quis risus magna. Vivamus eget accumsan mauris. Vivamus justo ligula, blandit et consequat nec, vulputate a elit. Morbi feugiat metus in ante scelerisque a pulvinar quam condimentum. Suspendisse potenti. Pellentesque convallis scelerisque nunc eget dapibus. Pellentesque ut enim justo. Fusce egestas urna sed nulla placerat iaculis. Cras dignissim tincidunt molestie. Suspendisse rutrum dignissim tortor quis mollis. Sed tempor feugiat ligula in imperdiet. Quisque molestie viverra erat in adipiscing. </div>
    
    <div id="tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">Donec porta malesuada massa, at...

CSS

/*
Copyright (c) 2008, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 3.0.0pr1
*/
/*
    TODO will need to remove settings on HTML since we can't namespace it.
    TODO with the prefix, should I group by selector or property for weight savings?
*/
html{
    color:#444;
    background:#FFF;
}
/*
    TODO remove settings on BODY since we can't namespace it.
*/
/*
    TODO test putting a class on HEAD.
        - Fails on FF. 
*/
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
    margin:0;
    padding:0;
}


/* Default font settings. 
   The font-size percentage is of 16px. (0.688 * 16px ~ 11px) */
body { 
  font-size: 68.8%;
  color: #444; 
  background: #fff;
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  line-height: 18px;  
}


/* Headings
-------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6 { font-weight: normal; color: #111; }

h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; }
h2 { font-size: 2em; margin-bottom: 0.75em; }
h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; }
h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }
h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; }
h6 { font-size: 1em; font-weight: bold; }

h1 img, h2 img, h3 img, 
h4 img, h5 img, h6 img {
  margin: 0;
}

JavaScript

$('#tab').tabs();
$('#date').datepicker();

 $("#my_buttonset").buttonset();