JSFiddle - React, Tailwind, and code Playground

HTML

<td class="btn opt-in">
  <label>
    <input type="radio" name="radio1" value="radio1">
  </label>
</td>
<td class="btn opt-out">
   <label>
     <input type="radio" name="radio1" value="radio2">
   </label>
</td>
<hr>
<td class="btn opt-in">
  <input type="radio" name="radio2" value="radio3">
  <label>    
  </label>
</td>
<td class="btn opt-out">
   <label>
     <input type="radio" name="radio2" value="radio4">
   </label>
</td>
<hr>
<td class="btn opt-in">
  <label>
    <input type="radio" name="radio3" value="radio5">
  </label>
</td>
<td class="btn opt-out">
   <label>
     <input type="radio" name="radio3" value="radio6">
   </label>
</td>

CSS

label { display:inline-block; width:30px; padding:5px 10px; margin:10px 0 0 5px; text-align:center; cursor:pointer; background:#f9f9f9; border:transparent 1px solid; }

label:hover { background:#F6FBFD; border:#CFE8F1 1px solid; }
label.active { background:#CFE8F1 ; border:#CFE8F1 1px solid;}

input { cursor:pointer; }

JavaScript

$('input:radio').click(function() {
    $('input:radio[name='+$(this).attr('name')+']').parent().removeClass('active');
        $(this).parent().addClass('active');
});