JSFiddle - React, Tailwind, and code Playground

by salitrapraveen

HTML

<div id="other0">
    <p class="head"><span>Calendar</span>

    </p>
    <table></table>
</div>
<div id="other1">
    <p class="head"><span>Calendar</span>

    </p>
    <table></table>
</div>
<div id="other2">
    <p class="head"><span>Calendar</span>

    </p>
    <table></table>
</div>
<div id="other3">
    <p class="head"><span>Calendar</span>

    </p>
    <table></table>
</div>
<div id="other4">
    <p class="head"><span>Calendar</span>

    </p>
    <table></table>
</div>
<div id="other5">
    <p class="head"><span>Calendar</span>

    </p>
    <table></table>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:100, 300, 400, 500, 700, 900);
 @import url(http://fonts.googleapis.com/css?family=Carrois+Gothic);
 body {
    background: #3e5161 url('http://www.taasky.com/img/top-bg.png');
    font-family:'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 300;
}
tr.selected td {
    color: #FFF;
    border-color: #73B6FF;
}
tr.selected td, tr.selected span {
    font-weight: bold;
}
div {
    width: 200px;
    border-left: 2px solid;
    border-right: 2px solid;
    border-color: #73B6FF;
    float: left;
    margin: 10px;
}
#other0 {
    background-color: #3D3E44;
    color: #B8B8B8;
}
#other1 {
    background-color: #FF6218;
    color: #CBCCCF;
}
#other2 {
    background-color: #8F5EC4;
    color: #CBCCCF;
}
#other3 {
    background-color: #BE5F89;
    color: #CBCCCF;
}
#other4 {
    background-color: #FFED67;
    color: #7483B1;
}
#other5 {
    background-color: #49E28C;
    color: #7483B1;
}
.head {
    display: block;
    text-align: center;
    font-size: 1.1em;
    font-weight: 400;
    margin: 0px;
}
.head span {
    border-bottom: 2px solid #73B6FF;
    color: #fff;
    padding: 0 4px;
    text-transform: uppercase;
}
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 6px 2px;
}
td {
    width: 30px;
    padding: 4px 0px;
    font-weight: 400;
    border-bottom: 2px solid #1996EB;
    text-align: center;
    font-size: 16px;
}
tr td:first-child {
    width: 80px;
    text-align: left;
    font-size: 14px;
}
tr span {
    display: block;
    font-size: 11px;
    font-weight: 300;
}

JavaScript

var days = ['SUNDAY', 'MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY'];
    var months = ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"];
    var currDate = new Date();
    for (var i = -3; i < 4; i++) {
        var cDate = new Date(currDate);
        var d = new Date(cDate.setDate(cDate.getDate() + i));
        var date = d.getDate();
        var day = days[d.getDay()];
        var month = months[d.getMonth()];
        var suff = getSuffix(date);
        var trEl = $('<tr>');
        var tdFirst = $('<td>')

        $('<td>').html('<span>' + day + '</span>' + month + ' ' + date + '<sup>' + suff + '</sup>').appendTo(trEl);
        $('<td>').text('6').appendTo(trEl);
        $('<td>').text('25').appendTo(trEl);
        $('<td>').text('AM').appendTo(trEl);

        if (i === 0) {
            trEl.addClass('selected');
        }
        trEl.appendTo($('table'));
    }

    function getSuffix(day) {
        var suffix;
        switch (day) {
            case 1:
            case 21:
            case 31:
                suffix = 'st';
                break;
            case 2:
            case 22:
                suffix = 'nd';
                break;
            case 3:
            case 23:
                suffix = 'rd';
                break;
            default:
                suffix = 'th';
        }

        return suffix;
    }