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>
    <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: Clerkship">Loading...</h1>
        <div id="campus-wrapper">
            <div class="region-wrapper" data-bind="foreach: Campuses">
                <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" data-bind="checked: Released" /></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-bind="foreach: Rotations">
                    <li class="rotation">
                        <h5 data-bind="text: Rotation"></h5>
                        <ul class="region-sites" data-bind="foreach: Sites">
                            <li class="site">
                                <span class="name" data-bind="text: Site"></span>
                                <div class="edit" title="Click to change capacity">edit
                                </div>
    ...

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("../../../images/capacity/plus_x1.png") no-repeat 10px 10px}
.region-wrapper .region-header .pod-button.release{background:url("../../../images/capacity/check_x1.png") 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...

JavaScript

var viewModel = null;

$(document).ready(function(){
   var json = '{"ClerkshipID":1,"Clerkship":"Psychiatry","IsSelective":false,"StartDate":"2012-05-03T09:33:12.1235561-04:00","EndDate":"2012-06-02T09:33:12.1235561-04:00","Campuses":[{"CampusID":0,"Campus":"Hamilton","Released":false,"AvailableToHamilton":false,"Rotations":[{"RotationID":1,"Rotation":"Psychiatry","Sites":[{"SiteID":10,"Site":"St. Joes","Min":0,"Max":6},{"SiteID":10,"Site":"MUMC","Min":0,"Max":6}]}]},{"CampusID":2,"Campus":"Waterloo Regional Campus","Released":true,"AvailableToHamilton":true,"Rotations":[{"RotationID":1,"Rotation":"Psychiatry","Sites":[{"SiteID":10,"Site":"St. Joes","Min":0,"Max":6},{"SiteID":10,"Site":"MUMC","Min":0,"Max":6}]}]},{"CampusID":0,"Campus":"Niagara Regional Campus","Released":false,"AvailableToHamilton":false,"Rotations":[{"RotationID":1,"Rotation":"Psychiatry","Sites":[{"SiteID":10,"Site":"St. Joes","Min":0,"Max":6},{"SiteID":10,"Site":"MUMC","Min":0,"Max":6}]}]}]}';

    var data = JSON.parse(json);
    createViewModel(data );
});
    
function createViewModel(data) {
    //debugger;
    viewModel = ko.mapping.fromJS(data);

    //Convert the model back to JSON
    viewModel.JSON = ko.computed(function () {
        return ko.toJSON(viewModel);
    }, this);

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