JSFiddle - React, Tailwind, and code Playground

by smacky311

HTML

<table id="TABLE_1">
	<colgroup id="COLGROUP_2">
		<col id="COL_3" />
		<col id="COL_4" />
	</colgroup> 
	<caption id="CAPTION_5">
		Hours
	</caption>
	<thead id="THEAD_6">
		<tr id="TR_7">
			<th id="TH_8">
				Earning
			</th>
			<th id="TH_9">
				Hours
			</th>
		</tr>
	</thead>
	<tfoot id="TFOOT_10">
		<tr id="TR_11">
			<td id="TD_12">
				Total
			</td>
			<td id="TD_13">
				74.0000
			</td>
		</tr>
	</tfoot>
	<tbody id="TBODY_14">
		<tr id="TR_15">
			<td id="TD_16">
				 <span id="SPAN_17">Reg</span>
			</td>
			<td id="TD_18">
				 <span id="SPAN_19">26.0000</span>
			</td>
		</tr>
		<tr id="TR_20">
			<td id="TD_21">
				 <span id="SPAN_22">Sick</span>
			</td>
			<td id="TD_23">
				 <span id="SPAN_24">16.0000</span>
			</td>
		</tr>
		<tr id="TR_25">
			<td id="TD_26">
				 <span id="SPAN_27">Vac</span>
			</td>
			<td id="TD_28">
				 <span id="SPAN_29">32.0000</span>
			</td>
		</tr>
	</tbody>
</table>

CSS

body {
  background-color: white;
}
#TABLE_1 {
    color: rgb(109, 110, 113);
    height: 216px;
    max-width: 100%;
    width: 555px;
    column-rule-color: rgb(109, 110, 113);
    perspective-origin: 278.5px 109px;
    transform-origin: 278.5px 109px;
    border: 1px solid rgb(201, 202, 203);
    border-spacing: 0px 0px;
    font: normal normal normal normal 12px / normal Arial, Helvetica, sans-serif;
    outline: rgb(109, 110, 113) none 0px;
}/*#TABLE_1*/

#COLGROUP_2, #COL_3 {
    color: rgb(109, 110, 113);
    column-rule-color: rgb(109, 110, 113);
    border: 0px none rgb(109, 110, 113);
    font: normal normal normal normal 12px / normal Arial, Helvetica, sans-serif;
    outline: rgb(109, 110, 113) none 0px;
}/*#COLGROUP_2, #COL_3*/

#COL_4 {
    color: rgb(109, 110, 113);
    column-rule-color: rgb(109, 110, 113);
    border: 0px none rgb(109, 110, 113);
    font: normal normal normal normal 12px / normal Arial, Helvetica, sans-serif;
    outline: rgb(109, 110, 113) none 0px;
}/*#COL_4*/

#CAPTION_5 {
    color: rgb(157, 159, 162);
    height: 18px;
    text-align: left;
    width: 557px;
    column-rule-color: rgb(157, 159, 162);
    perspective-origin: 278.5px 9px;
    transform-origin: 278.5px 9px;
    border: 0px none rgb(157, 159, 162);
    font: normal normal bold normal 16px / normal Arial, Helvetica, sans-serif;
    margin: 5px 0px 0px;
    outline: rgb(157, 159, 162) none 0px;
}/*#CAPTION_5*/

#THEAD_6 {
    background-position: 0px 50%;
    color: rgb(109, 110, 113);
    height: 35px;
    width: 555px;
    column-rule-color: rgb(109, 110, 113);
    perspective-origin: 277.5px 17.5px;
    transform-origin: 277.5px 17.5px;
    background: rgb(138, 139, 142) linear-gradient(rgb(157, 159, 162), rgb(109, 110, 113)) repeat-x scroll 0px 50% / auto padding-box border-box;
    border: 0px none rgb(201, 202, 203);
    font: normal normal normal normal 12px / normal Arial, Helvetica, sans-serif;
    outline: rgb(109, 110, 113) none...