JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://use.fontawesome.com/2bd3ff5cba.js"></script>
<div id="dlg-audit-intake-compliance-checklist" class="container">
<table class="table">
<tr>
<th>Delivery Ticket Validation</th>
<th class="text-center">Yes</th>
<th class="text-center">No</th>
<th class="text-center">N/A</th>
</tr>
<tr>
<td class="vert-align">Valid Signed and dated delivery ticket in patient's record.</td>
<td class="text-center vert-align">
<label>
<input type="radio" name="radio-group-1" id="radio-group-1-Y" value="Y" />
</label>
</td>
<td class="text-center vert-align">
<label>
<input type="radio" name="radio-group-1" id="radio-group-1-N" value="N" />
</label>
</td>
<td class="text-center vert-align">
<label>
<input type="radio" name="radio-group-1" id="radio-group-1-NA" value="NA" />
</label>
</td>
</tr>
<tr>
<td class="vert-align">Equipment descriptions and item numbers have been assigned the appropriate HCPC codes.</td>
<td class="text-center vert-align">
<label>
<input type="radio" name="radio-group-2" id="radio-group-2-Y" value="Y" />
</label>
</td>
<td...
CSS
#dlg-audit-intake-compliance-checklist input[type=radio] {
visibility: hidden;
}
#dlg-audit-intake-compliance-checklist input[type=radio]:hover {
cursor: pointer;
}
#dlg-audit-intake-compliance-checklist input[type=radio]:before {
visibility: visible;
font-family: FontAwesome;
content: "\f10c";
font-size: 25px;
text-shadow: 1px 1px 0px #ddd;
margin-bottom: 10px !important;
}
#dlg-audit-intake-compliance-checklist input[value=Y]:checked:before {
color: #009C15;
content: "\f00c";
}
#dlg-audit-intake-compliance-checklist input[value=N]:checked:before {
color: #AD0000;
content: "\f00d";
}
#dlg-audit-intake-compliance-checklist input[value=NA]:checked:before {
color: #F7D200;
content: "\f05e";
}