JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html> 
<html> 
    <head> 
    <title>My Page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
    </head> 
   
    <body> 
        <div data-role="page">

        <div data-role="header">
        <h1>some header</h1>
        </div><!-- /header -->

        <div data-role="content" data-theme="i">   
        
        <div id="table_all">
            <div data-role="navbar" id="navbar">
                <ul>
                    <li><a href="#" class="active" data-tab-class="tab1">Day</a></li>
                    <li><a href="#" data-tab-class="tab2">Week</a></li>
                    <li><a href="#" data-tab-class="tab3">Month</a></li>
                </ul>
            </div>
            
    <!-- DAY VIEW -->
    <div class="tab-content" data-theme="f">
    <div class="tab1">
    <table id="playlist-table">
    <div class="table_header"><h5>YYYY-MM-DD</h5></div>
    <tbody>
        <tr>
        <td class="hours">Oct 3</td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td class="hours">00:00</td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td class="hours">01:00</td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td class="hours">02:00</td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    </tbody>
</table>
 </div><!-- /DAY VIEW-->
                
    <!-- WEEK VIEW -->
<div class="tab2 ui-screen-hidden">
   <div class="tab-content" data-theme="f">
    <div class="tab2">
    <div class="table_header"><h5>YYYY week of MM-DD</h5></div>
        <table id="playlist-table">
    <tbody>
        <tr>
        <td class="hours">Oct 3</td>
       ...

CSS

/* DEFAULTS
----------------------------------------------------------*/
.content{
    padding: 10px;
}

/* CALENDAR 
----------------------------------------------------------*/
#table_all{
border:1px solid #64c1ea;
}
#playlist-table{
    width:100%;
    background:#bde5f6;
}
#navbar,
.ui-navbar{
    width:100%;
    background:#7acaed;
}
#navbar ul li{
color: #333333;
font-weight: bold;
text-decoration: none !important;
}
.table_header{
padding-bottom:6px;
padding-top:2px;
height: 40px;
background: #bde5f6;
text-align:center;
}
.active{
background: #bde5f6 !important;
border:none !important;
box-shadow:none !important;
text-decoration: none !important;
color:#333333 !important;
}
.inactive,{
    background:#7acaed;
    border-bottom: 1px solid #64c1ea; 
    text-decoration: none !important;
}
#playlist-table td{
    padding: 8px;
    background: #bde5f6; 
    color: #333333;
    border-top: 2px solid white; 
}
.tab-content-f{
    width:100%;
    height:250px;
    border-bottom-left-radius:.3em;
    border-bottom-right-radius:.3em;
}  
.hours{
text-align:left;
width:70px;
margin: 20px;
border-right: 2px solid white;
border-left: 2px solid white;
}
td{
/*font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;*/
    font-size: 12px;
    color: #000;
    width: 480px;
    border-collapse: collapse;
    text-align: center;
}
.tab3{
border-bottom: 1px solid white;
}
.tab3 tr td{
border-right: 2px solid white;
}

JavaScript

var prevSelection = "tab1";
        $("#navbar ul li").live("click",function(){
            var newSelection = $(this).children("a").attr("data-tab-class");
            $("."+prevSelection).addClass("ui-screen-hidden");
            $("."+newSelection).removeClass("ui-screen-hidden");
            prevSelection = newSelection;
            $(".active").removeClass("active").addClass("inactive");
            $(this).children("a").removeClass("inactive").addClass("active");
            
        });