JSFiddle - React, Tailwind, and code Playground

by dweiliu

HTML

<body>
    <header>
        <img src="http://lvlvolleyball.com/images/logo.png" />
    </header>
    <section class="schedule group">
        <div class="monday">
            <div class="monday-schedule">
                 <h1>Upcoming Monday Schedule - 9/12/13</h1>

                <table>
                    <tr>
                        <th colspan="2">Russell St.</th>
                    </tr>
                    <tr class="court-header">
                        <td>Court 1</td>
                        <td>Court 2</td>
                        <tr>
                            <td class="setup">Team A</td>
                            <td>Team B</td>
                        </tr>
                        <tr>
                            <td>Team C</td>
                            <td>Team D</td>
                        </tr>
                        <tr>
                            <td>Team E</td>
                            <td class="breakdown">Team F</td>
                        </tr>
                </table>
                <table>
                    <tr>
                        <th colspan="2">Middle School</th>
                    </tr>
                    <tr class="court-header">
                        <td>Court 1</td>
                        <td>Court 2</td>
                        <tr>
                            <td class="setup">Team A</td>
                            <td>Team B</td>
                        </tr>
                        <tr>
                            <td>Team C</td>
                            <td>Team D</td>
                        </tr>
                        <tr>
                            <td>Team E</td>
                            <td class="breakdown">Team F</td>
                        </tr>
                </table>
            </div>
        </div>
        <div class="wednesday">
            <div class="monday-schedule">
                 <h1>Upcoming Wednesday Schedule - 9/14/13</h1>

                <table>
               ...

CSS

body {
    font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 12px;
    padding-bottom: 20px;
}
.group:after {
    content:"";
    display: table;
    clear: both;
}
.hidden {
    display: none;
}
.fleft {
    float: left;
}
.fright {
    float: right;
}
ol {
    font-size: 14px;
    margin: 20px 0 0 0;
}
ol li {
    padding: 0 0 11px 0;
}

header, section {
    width: 1000px;
    margin: 0 auto;
    padding: 25px 0 0 25px;
}
header {
    text-align: center;
}
table {
    margin: 0 auto;
    width: 450px;
}
table td, table th {
    padding: 5px 20px;
    text-align: center;
    border: 1px solid #999;
}
tr.court-header {
    font-weight: bold;
}
th {
    background-color: #eee;
    text-transform: uppercase;
}
td.setup {
    background-color: #a9adf2;
}
td.breakdown {
    background-color: #94f08b;
}
.monday, .wednesday {
    width: 500px;
    float: left;
    text-align: center;
}
.winner {
    background-color: #94f08b;
}

JavaScript

$('tr.score').each(function () {
    var cells = $(this).children('td');
    var teamA = parseInt(cells[1].innerText);
    var teamB = parseInt(cells[3].innerText);
    
    if (teamA > teamB) {
        $(cells[1]).addClass('winner');
    } else {
        $(cells[3]).addClass('winner');   
    }    
});