JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <label>
        <input class="form-radio" type="radio" name="select_y" />
    </label>
    <label>
        <input class="form-radio" type="radio" name="select_y" />
    </label>
    <label>
        <input class="form-radio" type="radio" name="select_y" />
    </label>
</div>

<div>
    <label>
        <input class="form-checkbox" type="checkbox" name="select_x" />
    </label>
    <label>
        <input class="form-checkbox" type="checkbox" name="select_x" />
    </label>
    <label>
        <input class="form-checkbox" type="checkbox" name="select_x" />
    </label>
</div>

CSS

label {
  position: relative;
  display: inline-block;
  height: 100px;
  width: 100px;
  border: 1px solid black;
  margin: 5px;
  padding: 5px;
  vertical-align: top;
}

label.selected {
  background-color: #eee;
}

JavaScript

$('input').on('change', function(e) {
    var $this = $(this);
    var $label = $this.parent();
    
    // toggle visual feedback of selection
    if($this.is(':checked')) {
        if($this.attr('type') == 'radio') {
            var $selectedLabel = $('label.selected [name="'+$this.attr('name')+'"]').parent();
            $selectedLabel.removeClass('selected');
        }
        $label.addClass('selected');
    } else {
        $label.removeClass('selected');
    }
});