JSFiddle - React, Tailwind, and code Playground

by Dustin Newman

HTML

<TABLE cellpadding=3 class="smedcaltable">
<TR>
<th colspan=7>August 2014</th> 
</TR>
<TR> 
<td>Sun</td>
<td>Mon</td>
<td>Tue</td>
<td>Wed</td>
<td>Thu</td>
<td>Fri</td>
<td>Sat</td>
</TR>
<TR> 
<td></td>
<td></td>
<td></td>
<td></td>
<td></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>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</TR>
<TR> 
<td>17</td>
<td>18</td>
<td>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>28</td>
<td>29</td>
<td>30</td>
</TR>
<TR> 
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</TR>
<TR>
<th colspan=7>September 2014</th> 
</TR>
<TR> 
<td>Sun</td>
<td>Mon</td>
<td>Tue</td>
<td>Wed</td>
<td>Thu</td>
<td>Fri</td>
<td>Sat</td>
</TR>
<TR> 
<td></td>
<TD  class="schoolholiday">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</TR>
<TR> 
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</TR>
<TR> 
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</TR>
<TR> 
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
</TR>
<TR> 
<td>28</td>
<td>29</td>
<td>30</td>
<td></td>
<td></td>
<td></td>
<td></td>
</TR>
<TR>
<th colspan=7>October 2014</th> 
</TR>
<TR> 
<td>Sun</td>
<td>Mon</td>
<td>Tue</td>
<td>Wed</td>
<td>Thu</td>
<td>Fri</td>
<td>Sat</td>
</TR>
<TR> 
<td></td>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</TR>
<TR> 
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
</TR>
<TR> 
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
</TR>
<TR> 
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
</TR>
<TR> 
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td></td>
</TR>
<th...

CSS

#s {
width:120px;
}
.schoolholiday {
background-color:#33cc00;
}
.meeting {
background-color:#0099FF;
}
.event {
background-color:#ff0099;
}
td {
width: 35px;
text-align:center;
font-family: Helvetica, Arial;
font-size: 16px;
font-weight: 100;
transition: transform 1s ease-in;
}
td:hover {
-ms-transform: scale(1.2,1.2);
-webkit-transform: scale(1.2,1.2);
-moz-transform: scale(1.2,1.2);
transform: scale(1.2,1.2);
}
table {
border-collapse:collapse;
width:300px;
position: relative;
clear: both;
}
th {
text-align:center;
font-family: Helvetica, Arial, sans-serif;
font-weight: 200;
font-size: 16px;
}
tr {
font-weight:100;
}