JSFiddle - React, Tailwind, and code Playground

by bazilio91

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <form class="navbar-form">
            <div class="pull-left span4">
                <label for="period" class="pull-left">Period:</label>
                <select id="period" class="span2">
                    <option value="1months">1 month</option>
                    <option value="7days">7 days</option>
                    <option value="3days">3 days</option>
                    <option value="1days">1 day</option>
                    <option value="12hours">12 hours</option>
                    <option value="6hours">6 hours</option>
                    <option value="3hours" selected>3 hours</option>
                    <option value="1hours">1 hour</option>
                    <option value="30minutes">30 minutes</option>
                    <option value="15minutes">15 minutes</option>
                </select>
            </div>
            <div class="pull-left">
                <label for="reload" class="pull-left">Reload every:</label>
                <select id="reload" class="span2">
                    <option value="300">5 minutes</option>
                    <option value="60">1 minute</option>
                    <option value="30">30 seconds</option>
                    <option value="15">15 seconds</option>
                    <option value="5" selected>5 seconds</option>
                </select>
            </div>
        </form>
    </div>
</div>
<div id="content">
    <table id="graphs"></table>
</div>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
 body {
    background: black;
    padding:0;
    margin:0;
    overflow:hidden;
    font-family:"Helvetica", "Arial", "FreeSans", "Verdana", "Tahoma", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", sans-serif;
}
.navbar-form {
    padding: 0 2em;
}
.navbar-form label {
    padding:4px 10px 0 0;
    line-height: 30px;
}
table {
    border-collapse:collapse;
    border-spacing: 0;
}
table td {
    padding:0;
}
#content {
    top:50px;
    position:absolute;
    height:100%;
    width:100%;
}
#graphs h4 {
    color:#fff;
    padding-left:10px;
    text-align:center;
}

JavaScript

/*!
 * jQuery Cookie Plugin v1.3.1
 * https://github.com/carhartl/jquery-cookie
 *
 * Copyright 2013 Klaus Hartl
 * Released under the MIT license
 */
(function (factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as anonymous module.
        define(['jquery'], factory);
    } else {
        // Browser globals.
        factory(jQuery);
    }
}(function ($) {

    var pluses = /\+/g;

    function raw(s) {
        return s;
    }

    function decoded(s) {
        return decodeURIComponent(s.replace(pluses, ' '));
    }

    function converted(s) {
        if (s.indexOf('"') === 0) {
            // This is a quoted cookie as according to RFC2068, unescape
            s = s.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\');
        }
        try {
            return config.json ? JSON.parse(s) : s;
        } catch (er) {}
    }

    var config = $.cookie = function (key, value, options) {

        // write
        if (value !== undefined) {
            options = $.extend({}, config.defaults, options);

            if (typeof options.expires === 'number') {
                var days = options.expires,
                    t = options.expires = new Date();
                t.setDate(t.getDate() + days);
            }

            value = config.json ? JSON.stringify(value) : String(value);

            return (document.cookie = [
            config.raw ? key : encodeURIComponent(key),
                '=',
            config.raw ? value : encodeURIComponent(value),
            options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
            options.path ? '; path=' + options.path : '',
            options.domain ? '; domain=' + options.domain : '',
            options.secure ? '; secure' : ''].join(''));
        }

        // read
        var decode = config.raw ? raw : decoded;
        var cookies = document.cookie.split('; ');
        var result = key ?...