JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<script src="http://html5demos.com/js/h5utils.js"></script>
<script src="http://html5demos.com/js/modernizr.custom.js"></script>
  <header id="page-header" class="ac"> 
        <h1>Snips</h1> 
        <ol id="page-header-menu" class="inline"> 
            <li class="btn-settings"><label><span class="icon settings"></span>Settings</label></li> 
            <li class="btn-logout"><label><span class="icon logout"></span>Logout</label></li> 
        <ol> 
  </header> 
  
  <section id="main"> 
  
        <article id="settings"> 
            <section id="settings-content"> 
            <!--settings content --> 
            <form id="settings-form"> 
            <label>Name</label><input type="text" name="name" required="required" placeholder="Enter your name"> 
            <label>Email</label><input type="email" name="email" required="required" placeholder="A valid email address" pattern="^[A-Za-z0-9](([_\.\-]?[a-zA-Z0-9]+)*)@([A-Za-z0-9]+)(([\.\-]?[a-zA-Z0-9]+)*)\.([A-Za-z]{2,})$"> 
            <label>Password</label><input type="password" name="password" maxlength="30" placeholder="max. 30 char." required="required"> 
            </form> 
            </section> 
            <footer id="settings-footer"> 
            <ol class="buttons"> 
                <li id="btn-settings-cancel"><label><span class="icon delete"></span>Cancel</label></li> 
                <li id="btn-settings-save"><label><span class="icon plus"></span>Save</label></li> 
            </ol> 
            </footer> 
        </article> 
  
        <aside id="sidebar"> 
            <header id="sidebar-header"> 
            <!-- sidebar header --> 
            </header> 
            <section id="sidebar-content"> 
            <ul class="categories"> 
                <li class="category active"><label>General <span class="icon chevron"></span></label></li> 
                <li class="category"><label>Other Group <span class="icon chevron"></span></label></li> 
            </ul> 
            </section> 
  ...

CSS

/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
/* line 17, ../../../../../../usr/lib/ruby/gems/1.8/gems/compass-0.11.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* line 20, ../../../../../../usr/lib/ruby/gems/1.8/gems/compass-0.11.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
body {
  line-height: 1;
}

/* line 22, ../../../../../../usr/lib/ruby/gems/1.8/gems/compass-0.11.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
ol, ul {
  list-style: none;
}

/* line 24, ../../../../../../usr/lib/ruby/gems/1.8/gems/compass-0.11.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* line 26, ../../../../../../usr/lib/ruby/gems/1.8/gems/compass-0.11.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

/* line 28, ../../../../../../usr/lib/ruby/gems/1.8/gems/compass-0.11.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
q, blockquote {
  quotes: none;
}
/* line 101,...

JavaScript

//Test Support for HTML5 Features
  if (localStorage)  
    console.log("∝ Local Storage: OK");  
  else  
    console.log("∝ Local Storage: Unsupported");


    //show settings
    $(".btn-settings").click(function(){
        $('#settings').addClass('show');
        console.log("◼ SETTINGS WINDOW open");
    });
    
    //cancel settings
    $("#btn-settings-cancel").click(function(){
        $('#settings.show').removeClass('show');
        console.log("◼ SETTINGS WINDOW canceled");
    });
    
    //save settings
    $("#btn-settings-save").click(function(){
        $('#settings.show').removeClass('show');
        console.log("◼ SETTINGS WINDOW closed -saved");
    });

    //side navigation links
    $('#sidebar-content .categories li').click(function() {
        $('#sidebar-content .categories li.active').removeClass('active');
        $(this).addClass('active');
        
        var filterVal = $(this).children("label").text();
        console.log('↳ SIDEBAR ' + filterVal);

        return true;
    });

    //Remove selected Category
    $("#btn-category-remove").click(function() {
        $("li.category.active").remove();
    });

    //Full screen view for each Snip
    $("ul#sniplets").delegate("li.snip", "click", function(){
        $('#view-one').addClass('show');
        console.log("◼ SINGLE-VIEW WINDOW open");
    });
    
    //add new snip
    $("#btn-snip-add").click(function(){
        $('#view-one').addClass('show');
        console.log("◼ SINGLE-VIEW WINDOW open -add new");
    });

    // live cancel button for snip view
    $('body').delegate("#btn-cancel", "click", function(){
        $('#view-one').removeClass('show');
        console.log("◻ WINDOW closed -canceled");
        return false;
    });
    
    // live save button for snip view
    $('body').delegate("#btn-save", "click", function(){
        $('#view-one').removeClass('show');
        console.log("◻ WINDOW closed -saved");
        return false;
   ...