JSFiddle - React, Tailwind, and code Playground

HTML

<table class="elegant scheduleWidget">
	<thead>
		<th colspan="2" style="text-align:center">Time Off Requests</th>
	</thead>
	<tbody>
		<tr>
            <td>2013-05-18</td>
            <td>Pending</td>
        </tr>
        <tr>
            <td>2013-05-19</td>
            <td>Approved</td>
        </tr>
        <tr>
            <td>2013-06-04</td>
            <td>Approved</td>
        </tr>
        <tr>
            <td>2013-06-06</td>
            <td>Pending</td>
        </tr>
        <tr>
            <td>2013-07-01</td>
            <td>Pending</td>
        </tr>
        <tr>
            <td>2013-06-04</td>
            <td>Approved</td>
        </tr>
        <tr>
            <td>2013-06-04</td>
            <td>Approved</td>
        </tr>
        <tr>
            <td>2013-06-04</td>
            <td>Approved</td>
        </tr>
        <tr>
            <td>2013-06-04</td>
            <td>Approved</td>
        </tr>
        <tr>
            <td>2013-06-04</td>
            <td>Approved</td>
        </tr>
        <tr>
            <td>2013-06-04</td>
            <td>Approved</td>
        </tr>
        <tr>
            <td>2013-06-04</td>
            <td>Approved</td>
        </tr>
    </tbody>
	<tfoot>
		<tr>
			<td colspan="2">
				<div class="button" id="saveChanges" style="width:150px;margin-left:25px">Request Time Off</div>
			</td>
		</tr>
	</tfoot>
</table>

CSS

table.scheduleWidget{
	margin:10px;
	float:left;
	width: 250px;
	vertical-align: top;
}
table.scheduleWidget:last-child::after{
	clear:both;
}
table.scheduleWidget tbody{
	width: 250px;
	height: 50px;
	overflow: auto;
}
table.scheduleWidget tbody tr td, table.elegant.scheduleWidget tbody tr td{
	text-align: center;
	padding: 8px;
}

/* table.elegant is just a simple table styler downloaded from the internet */
table.elegant a:link {
	color: #666;
	font-weight: bold;
	text-decoration:none;
}
table.elegant a:visited {
	color: #999999;
	font-weight:bold;
	text-decoration:none;
}
table.elegant a:active,
table.elegant a:hover {
	color: #bd5a35;
	text-decoration:underline;
}
table.elegant {
	font-family:Arial, Helvetica, sans-serif;
	color:#666;
	font-size:12px;
	text-shadow: 1px 1px 0px #fff;
	background:#eaebec;
	margin: 5px;
	border:#ccc 1px solid;

	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;

	-moz-box-shadow: 0 1px 2px #d1d1d1;
	-webkit-box-shadow: 0 1px 2px #d1d1d1;
	box-shadow: 0 1px 2px #d1d1d1;
}
table.elegant th {
	padding:21px 25px 22px 25px;
	border-top:1px solid #fafafa;
	border-bottom:1px solid #e0e0e0;

	background: #ededed;
	background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb));
	background: -moz-linear-gradient(top,  #ededed,  #ebebeb);
}
table.elegant th:first-child {
	text-align: left;
	padding-left:20px;
}
table.elegant tr:first-child th:first-child {
	-moz-border-radius-topleft:3px;
	-webkit-border-top-left-radius:3px;
	border-top-left-radius:3px;
}
table.elegant tr:first-child th:last-child {
	-moz-border-radius-topright:3px;
	-webkit-border-top-right-radius:3px;
	border-top-right-radius:3px;
}
table.elegant tr {
	text-align: center;
	padding-left:20px;
}
table.elegant td:first-child {
	text-align: left;
	padding-left:20px;
	border-left: 0;
}
table.elegant td {
	padding:18px;
	border-top: 1px solid #ffffff;
	border-bottom:1px solid #e0e0e0;
	border-left: 1px solid...