JSFiddle - React, Tailwind, and code Playground

HTML

<table>
<tr class="roomAmPmSelectTr">
	<td class="amPmCheckbox main_street" id="am_2">
		<input type="hidden" name="data[Child][remember_me]" id="am_2_" value="0"/>
		<input type="checkbox" name="data[Child][remember_me]"  class="checkboxLabel main_street_input" id="am_2" value="1"/>
		<label for="am_2">&nbsp; &nbsp;&nbsp;</label> 
		<span class="checkboxLabel">&nbsp;AM&nbsp;</span>
	</td>
		<td class="amPmCheckbox main_street" id="pm_2">
		<input type="hidden" name="data[Child][remember_me]" id="pm_2_" value="0"/>
		<input type="checkbox" name="data[Child][remember_me]"  class="checkboxLabel main_street_input" id="pm_2" value="1"/>
		<label for="pm_2">&nbsp; &nbsp;&nbsp;</label> 
		<span class="checkboxLabel">&nbsp;PM&nbsp;</span>
	</td>
	<td></td>
</tr>

	<tr class="roomAmPmSelectTr">
	<td class="amPmCheckbox main_street" id="am_3">
	<input type="hidden" name="data[Child][remember_me]" id="am_3_" value="0"/>
	<input type="checkbox" name="data[Child][remember_me]"  class="checkboxLabel main_street_input" id="am_3" value="1"/>
	<label for="am_3">&nbsp; &nbsp;&nbsp;</label> 
	<span class="checkboxLabel">&nbsp;AM&nbsp;</span>
	</td>
	<td class="amPmCheckbox main_street" id="pm_3">
	<input type="hidden" name="data[Child][remember_me]" id="pm_3_" value="0"/>
	<input type="checkbox" name="data[Child][remember_me]"  class="checkboxLabel main_street_input" id="pm_3" value="1"/>
	<label for="pm_3">&nbsp; &nbsp;&nbsp;</label> 
	<span class="checkboxLabel">&nbsp;PM&nbsp;</span>
	</td>
	<td></td>
</tr>
</table>

CSS

.amPmCheckbox input[type="checkbox"]{
    display: none;
}   		
.amPmCheckbox input[type="checkbox"]+label{
    background: url('http://renegadeox.com/img/off.png') no-repeat; width:16px; height:17px;
}
.amPmCheckbox input[type="checkbox"]:checked + label {
    background: url('http://renegadeox.com/img/on.png');width:16px; height:17px;
}