JSFiddle - React, Tailwind, and code Playground

by FrictionlessPulley

HTML

<div id="wrap">
        <div id="main">
            <div id="header">
                <div class="innerGirdle">
                    <div id="logo"></div>
                    <div id="search"><a href="#">Help</a> &nbsp; | &nbsp; <a href="#">Logout</a></div>
                    <div id="pageTitle">
                        Calendar Builder  &nbsp;
                        <span id="titleHolder">Untitled</span>
                    </div>
                </div>
            </div>
            <div id="body" class="innerGirdle">
                <table id="formTable">
                    <tr id="calendarObjects"  class="active">
                        <td>Select Calendar Objects</td>
                        <td>
                            <div class="objectWrap">
                                <div class="calendarObject activityObj">
                                    <label class="objectTitle" for="chkOb1">Activities</label>
                                    <input type="checkbox" id="chkOb1" />
                                </div>
                            </div>
                            <div class="objectWrap">
                                <div class="calendarObject taskObj">
                                    <label class="objectTitle" for="chkOb2">Tasks</label>
                                    <input type="checkbox" id="chkOb2" />
                                </div>
                            </div>
                            <div class="objectWrap">
                                <div class="calendarObject otherObj">
                                    <label class="objectTitle" for="chkOb3">Object 3</label>
                                    <input type="checkbox" id="chkOb3" />
                                </div>
                            </div>
                            <div class="objectWrap">
                                <div class="calendarObject otherObj">
                                    <label class="objectTitle"...

CSS

@font-face {
    font-family:helvetica;
    src:url(fonts/HelveticaWorld-Regular.ttf);
}

@font-face {
    font-family:helvetica;
    src:url(fonts/HelveticaWorld-Bold.ttf);
    font-weight:700;
}

@font-face {
    font-family:futura;
    src:url(fonts/futura-medium.ttf);
}

@font-face {
    font-family:futura;
    src:url(fonts/futura-bold.ttf);
    font-weight:700;
}

.width-100 { width:100% }
.width-75 { width:75% }
.width-50 { width:50% }
.width-25 { width:25% }

/*  
Sticky Footer Solution
by Steve Hatcher 
http://stever.ca
http://www.cssstickyfooter.com
*/
* {
    margin:0;
    padding:0;
}

html,body {
    height:100%;
    font-family:futura;
}

#wrap {
    min-height:100%;
}

#main {
    overflow:auto;
    padding-bottom:19px;
}

#footer {
    position:relative;
    margin-top:-19px;

    height:19px;
    clear:both;
    background-image:url(css-ref/footerBGTile.png);
}
/* Browser Reset - Makes it so code renders the same in all browsers */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img { 
    border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    list-style:none;
}
caption,th {
    text-align:left;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border:0;
}

/* End Browser Reset */

#header {
    height:94px;
    background-image:url(css-ref/headerBGTile.png);
}

.innerGirdle {
    margin:auto;
    width:900px;
}

.rightSpacer {
    margin-right:25px !important;
}

#body {
    padding-top:15px;
}

#logo {
    height:45px;
    width:110px;
    float:left;
    background-image:url(css-ref/logo.png);
    margin-top:15px;
    cursor:pointer;
}

#search {
    height:35px;
    width:325px;
    float:right;
    background-image:url(css-ref/searchBar.png);
   ...

JavaScript

var pickTree 
var pickThree = function(){
 
    var canPickMore = function(){
        return $("#calendarObjects :checkbox:checked").length === 3;
    };
     
   var focusOnItem = function(){
};    
    
}

function limitChecks() {
    if($("#calendarObjects :checkbox:checked").length == 3) {
        $("#calendarObjects :checkbox").not(":checked").attr("disabled",true);
        $(".calendarObject").unbind("mouseenter mouseleave mouseover mouseout");
    }
    else {
        $("#calendarObjects :checkbox").attr("disabled",false);
        $(".calendarObject").bind("mouseenter mouseleave mouseover mouseout");
    }
    
    return $("#calendarObjects :checkbox:checked").length;
}

$(function() {
    
    // Toggles the checkbox when a calendar object container is clicked
    $(".objectWrap").toggle(function() {
        if(limitChecks() < 3 && $(this).closest(":checkbox").not(":disabled")) {
            $(this).find("input:checkbox").prop("checked", true);
            $(this).find(".calendarObject").addClass("selected");
            
            limitChecks();
            
            if($(this).find(".calendarObject").hasClass("activityObj")) {
                $(this).find(".calendarObject").css("background-image","url('includes/css-ref/activityBGOn.png')");
            } else if($(this).find(".calendarObject").hasClass("taskObj")) {
                $(this).find(".calendarObject").css("background-image","url('includes/css-ref/taskBGOn.png')");
            } else if($(this).find(".calendarObject").hasClass("otherObj")) {
                $(this).find(".calendarObject").css("background-image","url('includes/css-ref/objectBGOn.png')");
            }
        }
    }, function() {
        $(this).find("input:checkbox").prop("checked", false);
        $(this).find(".calendarObject").removeClass("selected");
        
        limitChecks();
        
        if($(this).find(".calendarObject").hasClass("activityObj")) {
           ...