JSFiddle - React, Tailwind, and code Playground

by Winston Fan

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
    <!----------Sunday-------------->
    <div data-role="page" id="sunday" class="weekday" data-prev="#saturday" data-next="#home" data-url="#sunday" data-dom-cache="true">
        <div data-role="header" class="orange" style="color: white; text-align: center; height: 40px; line-height: 40px; vertical-align: middle;" data-position="fixed">Sunday</div>
        <div data-role="content" style="margin: 0px; padding: 0px;">

            <div class="ui-grid-a myCell">

                <!--row 1-->
                <div class="ui-block-a timeCol" style="">
                    6.15 am
                </div>

                <div class="ui-block-b rightCol" style="color: black;">
                        <div>
                        <div class="CSRoom">CS</div>
                        <strong>Cycling </strong>45min
                    </div>
                    <div>
                        <div class="BSRoom">BS</div>
                        <strong>Boxing </strong>45min
                    </div>
                </div>

                <!--------end of row 1------------>

                <div class="ui-block-a timeCol orange" style="">
                    8.10 am
                </div>

                <div class="ui-block-b rightCol orange" style="color: black;">
                    &nbsp;
                </div>
                <!--------end of row 2------------>
                <div class="ui-block-a timeCol" style="">
                    9 am
                </div>

                <div class="ui-block-b rightCol" style="color: black;">
                    &nbsp;
                </div>
                <!--------end of row 3------------>
                <div class="ui-block-a timeCol orange" style="">
                    9.30 am
                </div>

                <div...

CSS

.myCell div {
    text-align: center;
    vertical-align: middle;
    background-color: #CDCBCA;
    border: 1px solid white;
}

.ui-grid-a
{
    background-color: red;    
}
.orange {
    background-color: #FF994F !important;
    color: white;
}

.timeCol {
    min-width: 50px !important;
    width:20% !important;
    padding-left: 2px !important; 
}

.rightCol {
    width: 80% !important;
    min-width: 100px !important;
}

.timeCol, .rightCol {
    vertical-align: middle;
    min-height: 36px !important;
    line-height: 36px !important; 
}

.BSRoom, .CSRoom, .ORoom,
.WSRoom, .LPRoom, .GFSRoom,
.PPRoom, .TDRoom {
    width: 35px;
    height: 30px;
    min-width: 0px;
    border: 1px solid white;
    text-align: center;
    vertical-align: middle;
    margin: 2px 0 2px 2px;
    float: left;
    line-height: 30px;
}

.BSRoom {
    background-color: #00c1b5 !important;
}

.CSRoom {
    background-color: white !important;
}

.WSRoom {
    background-color: #4EC7DA !important;
}

.ORoom {
    background-color: #FFCFD3 !important;
}

.LPRoom {
    background-color: #ffcf9e !important;
}

.GFSRoom {
    background-color: #59b378 !important;
}

.PPRoom {
    background-color: #926182 !important;
}

.TDRoom {
    background-color: #f5f2b5 !important;
}