JSFiddle - React, Tailwind, and code Playground

by maxx0r

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        
        <style>
            body {
                padding-top: 60px;
                padding-bottom: 40px;
            }
        </style>
        
 

        <!-- This code is taken from http://twitter.github.com/bootstrap/examples/hero.html -->

        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </a>
                    <a class="brand" href="#">Timetabletest</a>
                    <div class="nav-collapse collapse">
                        <ul class="nav">
                            <li class="active"><a href="#">Home</a></li>                            
                        </ul>
                    </div><!--/.nav-collapse -->
                </div>
            </div>
        </div>

        <div class="container-fluid">
            <div class="row-fluid">
                <div class="span4">
                    Welkom John, dit is je planning
                </div>
                <div class="span8">
                    <h2>Instellingen</h2>                    
                </div>
                            
            </div>
            <div class="row-fluid nav-container">
                <h2...

CSS

.nav-container { 
    text-align:justify;

}
    .period:first-of-type { 
        clear:left;
    }
    .period {
        float:left;
        
        width:7.6%;
        text-align:center;
        display:inline-block;    
         -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    }
    .period:nth-of-type(even),
    .detail-period:nth-of-type(even){
        background:#e2e2e2;
    }
    .period:nth-of-type(odd),
    .detail-period:nth-of-type(odd){
        background:#f1f1f1;
    }
    .day-container {
        display: block;
        height: 3em;
        white-space:nowrap;
        overflow:hidden;
    }
    .day-container .detail-period {
        width:10%;
        height:2em;        
        display:inline-block;
        text-align:center;
        position:relative;
        left:-30rem;
    }
    .day-container .detail-period.current {
        width:50%;
        color:orange;
    }
/*!
 * Bootstrap v2.3.0
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 */.clearfix{*zoom:1}.clearfix:before,.clearfix:after{display:table;line-height:0;content:""}.clearfix:after{clear:both}.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.input-block-level{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}a:focus{outline:thin dotted #333;outline:5px auto...

JavaScript

$(document).ready(function() {
    var wrapper = $("<div />")
    var dagen = new Array();
    dagen[0] = "Maandag 10 juni";
    dagen[1] = "Dinsdag 11 juni";
    dagen[2] = "Woensdag 12 juni";
    var periodStart = 9;
    var periodEnd = 21;
    for(var i = 1; i<=3;i++) {
        //Itereren over de dagen
        var dagItem = $("<div />").addClass("day").addClass("").data("day", i).append(
                                    $("<span />").addClass("day-label").html(dagen[i-1])
                                ).append("<br />");
        var detailContainer = $("<div />").addClass("day-container");
        for(var j = periodStart;j<=periodEnd;j++) {
            dagItem.append(
                $("<div />").addClass("period").attr("data-day", i).attr("data-period", j).text(j).prop("title", dagen[i-1] + " " + j +" uur")
            )            
            detailContainer.append(
                $("<div />").addClass("detail-period").attr("data-day", i).attr("data-period", j).text(j + " uur").prop("title", j +" uur")
            );
        }
        dagItem.appendTo(wrapper);
        detailContainer.appendTo(".detail-container")
       
        
    }
    var periodWidth = 100 / (periodEnd - periodStart + 1);
    $(wrapper).find(".period").css({width: periodWidth + "%"})
    wrapper.insertAfter($(".nav-container h2"));
    $(".day .period").on("click", function() {
        var day = $(this).data("day");
        var period = $(this).data("period");
        var detailElement = $(".detail-period[data-day='" + day + "'][data-period='" + period +"']");
        if(detailElement && detailElement.length == 1) {
        setFocusTo(detailElement);
        } else { return; } 
    })
    
    function setFocusTo(element) {
        $(element).parent().find(".detail-period.current").removeClass("current");
        var baseWidth = element.width();
        element.addClass("current");
        var parent = element.parent();
        var elementIndex = element.index();        
       ...