JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://zurb.com/playground/playground/responsive-tables/responsive-tables.css">
<script src="http://zurb.com/playground/playground/responsive-tables/responsive-tables.js"></script>
<div id="container">
    <table class="responsive">
        <thead>
            <tr>
                <th rowspan="">header</th>
                <th colspan="4">January</th>
                <th colspan="4">February</th>
                <th>...</th>
                <th colspan="4">December</th>
            </tr>
            <tr>
                <th>&nbsp;</th>
                <th>1</th>
                <th>2</th>
                <th>...</th>
                <th>30</th>
                
                <th>1</th>
                <th>2</th>
                <th>...</th>
                <th>30</th>
                
                <th>...</th>
                
                <th>1</th>
                <th>2</th>
                <th>...</th>
                <th>30</th>
            </tr>
        </thead>
        
        <tbody>
            <tr>
                <td>Me</td>
                <td>X</td>
                <td></td>
                <td>X</td>
                <td>X</td>
                <td></td>
                <td>X</td>
                <td>X</td>
                <td></td>
                <td>X</td>
                <td>X</td>
                <td>X</td>
                <td></td>
                <td>X</td>
            </tr>
            
            <tr>
                <td>MyFriend</td>
                <td>X</td>
                <td></td>
                <td>X</td>
                <td>X</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>X</td>
                <td>X</td>
                <td></td>
                <td></td>
                <td>X</td>
            </tr>
            
            <tr>
                <td>...</td>
                <td>...</td>
                <td>...</td>
...

CSS

#container {
    /*overflow: scroll;*/
    width: 200px;
    height: 100px;
}

#container table, #container td, #container th {
	border: 1px solid black;
	border-collapse: collapse;
}

#container table {
    background-color: pink;
}

#container thead {
    background-color: red;
}

#container thead tr:first-child th:first-child {
    background-color:blue;
}

#container thead tr:nth-child(2) th:nth-child(1) {
    background-color:blue;
    border-top:0;
}

#container tbody tr td:first-child {
    background-color:green;
}