JSFiddle - React, Tailwind, and code Playground

by JohnFish

HTML

<table>
  <thead>
    <tr>
      <th colspan="7">
        October 2011
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Mon</th>
      <th>Tue</th>
      <th>Wed</th>
      <th>Thu</th>
      <th>Fri</th>
      <th>Sat</th>
      <th>Sun</th>
    </tr>
    <tr>
      <td class="off">26</td>
      <td class="off">27</td>
      <td class="off">28</td>
      <td class="off">29</td>
      <td class="off">30</td>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
    <tr>
      <td>10</td>
      <td>11</td>
      <td class="weekago">12</td>
      <td>13</td>
      <td>14</td>
      <td>15</td>
      <td>16</td>
    </tr>
    <tr>
      <td>17</td>
      <td>18</td>
      <td class="today">19</td>
      <td>20</td>
      <td>21</td>
      <td>22</td>
      <td>23</td>
    </tr>
    <tr>
      <td>24</td>
      <td>25</td>
      <td>26</td>
      <td>27</td>
      <td class="event">28</td>
      <td>29</td>
      <td>30</td>
    </tr>
    <tr>
      <td>31</td>
      <td class="off">1</td>
      <td class="off">2</td>
      <td class="off">3</td>
      <td class="off">4</td>
      <td class="off">5</td>
      <td class="off">6</td>
    </tr>
  </tbody>
</table>

CSS

body {
  background-color: #f4f4f4; }

table {
    position: relative;
  -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
  -ms-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
  -o-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
  border-spacing: 0;
  font-family: 'Helvetica Neue', Arial;
  width: 239px; }
  table thead th {
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    -ms-border-radius: 1px;
    -o-border-radius: 1px;
    border-radius: 1px;
    -webkit-box-shadow: inset 0 1px 0 0 #e88486;
    -moz-box-shadow: inset 0 1px 0 0 #e88486;
    -ms-box-shadow: inset 0 1px 0 0 #e88486;
    -o-box-shadow: inset 0 1px 0 0 #e88486;
    box-shadow: inset 0 1px 0 0 #e88486;
    background-color: #e56568;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e56568), color-stop(100%, #bd3f41));
    background-image: -webkit-linear-gradient(top, #e56568, #bd3f41);
    background-image: -moz-linear-gradient(top, #e56568, #bd3f41);
    background-image: -ms-linear-gradient(top, #e56568, #bd3f41);
    background-image: -o-linear-gradient(top, #e56568, #bd3f41);
    background-image: linear-gradient(top, #e56568, #bd3f41);
    border: 1px solid #ac2826;
    color: white;
    font-size: 13pt;
    font-weight: 400;
    padding: 8px 0;
    text-align: center;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.3); }
  table tbody th {
    -webkit-box-shadow: inset 0 1px 0 0 white;
    -moz-box-shadow: inset 0 1px 0 0 white;
    -ms-box-shadow: inset 0 1px 0 0 white;
    -o-box-shadow: inset 0 1px 0 0 white;
    box-shadow: inset 0 1px 0 0 white;
    background-color: #f5f5f5;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #e8e8e8));
    background-image: -webkit-linear-gradient(top, #f5f5f5, #e8e8e8);
    background-image: -moz-linear-gradient(top, #f5f5f5, #e8e8e8);
   ...