JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://dl.dropbox.com/u/3234184/knockout-2.0.0.js"></script>
<script src="http://dl.dropbox.com/u/3234184/knockout.mapping.js"></script>
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<div id="main-container">
    <!-- Header Area -->
    <div id="capacity-header">
        <div class="pod">
            Choose Rotation:
        </div>
        <div class="pod">
            Launch Date:
        </div>
        <div class="pod">
            Due Date:
        </div>
        <div class="clear">
        </div>
    </div>
    <h1 id="clekership-header" data-bind="text: data.Clerkship">Loading...</h1>
    <div id="campus-wrapper">
        <div class="region-wrapper" data-template="campus-template" data-bind="source: data.Campuses">
            
        </div>
    </div>    
</div>



<script id="campus-template" type="text/x-kendo-template">
    <div>
     <div class="region-header">
        <div class="pod-left">
            <h1>
                <span data-bind="text: Campus">Campus</span>
                <label class="available"><input type="checkbox" title="Extra spots can be used by hamilton students" /></label>
            </h1>
            
        </div>
        <div class="pod-button add">
            Add New
        </div>
        <div class="pod-button release">
            Release
        </div>
        <div class="clear">
        </div>
    </div>
    
    <ul class="region-rotations" data-template="rotation-template" data-bind="source: Rotations" />
    <div class="clear">
    </div>
</div>
</script>

<script id="rotation-template" type="text/x-kendo-template">
    <li class="rotation">
        <h5 data-bind="text: Rotation"></h5>
        <ul class="region-sites" data-template="site-template" data-bind="source: Sites"  />
    </li>
</script>

<script id="site-template" type="text/x-kendo-template">
    <li class="site">
        <span class="name" data-bind="text: Site"></span>
        <div class="edit"...

CSS

#main-container{position:absolute;width:100%;height:100%;background:#f0f0f0}
#capacity-header{width:100%;border-bottom:1px solid #d0d0d0;background:#f0f0f0}
#capacity-header .pod{float:left;padding:10px;border-right:1px solid #d0d0d0;border-left:1px solid #fff;background:#f5f5f5;font-size:13px;font-weight:bold}
#capacity-header .pod:first-child{border-left:0}
.region-wrapper{padding:10px}
.region-wrapper .region-header{border:1px solid #d0d0d0;background:#f5f5f5;margin-bottom:10px}
.region-wrapper .region-header h1{margin:0;padding:0;font-size:20px;color:#fff}
.region-wrapper .region-header .pod-left{float:left;padding:10px}
.region-wrapper .region-header .pod-button{float:right;padding:12px;padding-bottom:13px;font-weight:bold;padding-left:40px;cursor:pointer;color:#fff}
.region-wrapper .region-header .pod-button.add{background:url("") no-repeat 10px 10px}
.region-wrapper .region-header .pod-button.release{background:url("") no-repeat 10px 10px}
.region-wrapper .region-header{background:#ff6e6e;border:1px solid #c65b5b}
.region-wrapper .region-header h1{text-shadow:0 -1px 0 #c65b5b}
.region-wrapper .region-header .pod-button{border-left:1px solid #c65b5b}
.region-wrapper .region-header.released{background:#82e8c9;border:1px solid #63d1b5}
.region-wrapper .region-header.released h1{text-shadow:0 -1px 0 #63d1b5}
.region-wrapper .region-header.released .pod-button{border-left:1px solid #63d1b5}
.region-wrapper .rotation{border:1px solid #d0d0d0;background:#fff;padding:10px 0 0 10px;margin-bottom:10px}
.region-wrapper .rotation .region-sites{clear:both}
.region-wrapper .rotation .site{position:relative;padding:10px 90px 2px 10px;border:1px solid #d0d0d0;background:#f4f4f4;width:auto;float:left;margin-right:10px;margin-bottom:10px;height:30px}
.region-wrapper .rotation .site .capacity{position:absolute;top:5px;right:5px;padding:5px;background:#fff;border:1px solid #d0d0d0}
.region-wrapper .rotation .site .edit{position:absolute;top:10px;right:52px;background:url("")...

JavaScript

var viewModel = null;

function createViewModel(json) {
    viewModel = kendo.observable({
        data: json
    });

    kendo.bind($("#main-container"), viewModel);

    //Add in the extra clears on the site level
    $(".region-sites").each(function() {
        $(this).append("<div class='clear'></div>");
    });
}

$(document).ready(function() {
    var json = {
        "BlockID": 14,
        "ClerkshipID": 1,
        "Cohort": 2013,
        "Clerkship": "Anesthesiology",
        "IsSelective": false,
        "StartDate": "2011-12-05T00:00:00",
        "EndDate": "2011-12-19T00:00:00",
        "Campuses": [{
            "CampusID": 0,
            "Campus": "Hamilton",
            "Released": false,
            "AvailableToHamilton": false,
            "Rotations": [{
                "RotationID": 6,
                "Rotation": "Anesthesiology",
                "Sites": [{
                    "SiteID": 2,
                    "Site": "Chedoke Hospital",
                    "Min": 1,
                    "Max": 2},
                {
                    "SiteID": 11,
                    "Site": "Hamilton General Hospital",
                    "Min": 0,
                    "Max": 2},
                {
                    "SiteID": 45,
                    "Site": "Hamilton Health Sciences",
                    "Min": 1,
                    "Max": 4}]}]},
        {
            "CampusID": 1,
            "Campus": "Waterloo",
            "Released": false,
            "AvailableToHamilton": false,
            "Rotations": [{
                "RotationID": 6,
                "Rotation": "Anesthesiology",
                "Sites": [{
                    "SiteID": 47,
                    "Site": "Kitchener-Waterloo",
                    "Min": 3,
                    "Max": 3}]}]},
        {
            "CampusID": 2,
            "Campus": "Niagara",
            "Released": false,
            "AvailableToHamilton": false,
            "Rotations": []}]
    };


   ...