JSFiddle - React, Tailwind, and code Playground

by kchilton

HTML

<form action="/Home/Index" method="post">
    <section class="timeEntry">
        <section class="timeDates">
             <h3>07/15/2013 - 07/29/2013</h3>

            <div class="timeViewList">
                <ul>
                    <li class="date"><span class="dateName">Mon</span><span class="dateNum" data-calendarID="562">07/15</span>
                    </li>
                    <li class="date"><span class="dateName">Tue</span><span class="dateNum" data-calendarID="563">07/16</span>
                    </li>
                    <li class="date"><span class="dateName">Wed</span><span class="dateNum" data-calendarID="564">07/17</span>
                    </li>
                    <li class="date"><span class="dateName">Thu</span><span class="dateNum" data-calendarID="565">07/18</span>
                    </li>
                    <li class="date"><span class="dateName">Fri</span><span class="dateNum" data-calendarID="566">07/19</span>
                    </li>
                    <li class="date"><span class="dateName">Sat</span><span class="dateNum" data-calendarID="567">07/20</span>
                    </li>
                    <li class="date"><span class="dateName">Sun</span><span class="dateNum" data-calendarID="568">07/21</span>
                    </li>
                    <li class="date"><span class="dateName">Mon</span><span class="dateNum" data-calendarID="569">07/22</span>
                    </li>
                    <li class="date"><span class="dateName">Tue</span><span class="dateNum" data-calendarID="570">07/23</span>
                    </li>
                    <li class="date"><span class="dateName">Wed</span><span class="dateNum" data-calendarID="571">07/24</span>
                    </li>
                    <li class="date"><span class="dateName">Thu</span><span class="dateNum" data-calendarID="572">07/25</span>
                    </li>
                    <li class="date"><span class="dateName">Fri</span><span class="dateNum"...

CSS

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    vertical-align:baseline
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, div {
    display:block;
    position:relative
}
blockquote, q {
    quotes:none
}
blockquote:before, blockquote:after, q:before, q:after {
    content:"";
    content:none
}
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none
}
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold
}
del {
    text-decoration:line-through
}
abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help
}
table {
    border-collapse:collapse;
    border-spacing:0
}
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #ccc;
    margin:1em 0;
    padding:0
}
ol, ul {
    list-style:none
}
caption, th, td {
    text-align:left;
    font-weight:normal;
    vertical-align:middle
}
a img {
    border:none
}
body {
    font:13px/1.231 sans-serif;
    *font-size:small
}
pre, code, kbd, samp {
    font-family:monospace, sans-serif
}
a:hover, a:active {
    outline:none
}
small {
    font-size:85%
}
b, strong, th {
    font-weight:bold
}
td {
    vertical-align:top
}
sub, sup {
    font-size:75%;
    line-height:0;
    position:relative
}
sup {
    top:-0.5em
}
sub {
    bottom:-0.25em
}
pre {
    white-space:pre;
    white-space:pre-wrap;
    word-wrap:break-word;
    padding:15px
}
.ie6 legend, .ie7 legend {
    margin-left:-7px
}
button, input, select, textarea {
    width:auto;
   ...

JavaScript

jQuery(document).ready(function ($) {
    //set nav parents/subnav
    $("#navMain li a").each(function () {
        if ($(this).next().length > 0) {
            $(this).parent().addClass("hasSubMenu");
        }
    });

    //toggle nav menu on small screen sizes
    $("#menuToggle").click(function (e) {
        e.preventDefault();
        $("#navMain").children().toggle();
    });

    //trigger menu event transitions on screen changes
    $(window).bind('resize orientationchange', function () {
        menuEvents();
    });
    //set menu events
    menuEvents();


    //GENERIC PAGES

    $('.listingDelete').click(function () {
        noty({
            text: "Are you sure that you want to remove this record?",
            modal: true,
            buttons: [{
                text: "Remove",
                onClick: function ($noty) {
                    alert("NEED TO DELETE");
                    //REMOVE RECORD FROM DB
                    $noty.close();
                }
            },
            {
                text: "Cancel",
                onClick: function ($noty) {
                    $noty.close();
                }
            }]
        });
    });


    //TIME ENTRY PAGE

    //hide save button if no employee id exists
    if ($('#login').data("er-id") === "" || $('#login').data("er-id") === 0) { $('.navSubmit .btn[type=submit]').hide(); }

    //    $('.payPeriodChooser').click(function () {
    //        //$(this).children().trigger('click');
    //        //alert('test');
    //    });

    //enhance weekend days
    $('.dateName').each(function () {
        var el = $(this);
        if (el.text() == "Sat" || el.text() == "Sun") {
            $('.timeViewList li:eq(' + el.parent().index() + ')').addClass("weekend");
        }
    });

    $(".jobChooser input[type=checkbox][checked]").each(function () {
        $(this).parent().addClass("active");
    });

    var btnJobChooser = $(".jobChooser a");

    btnJobChooser.click(function (e) {
...