JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row checkboxes">
     <div class="col-lg-8">
       <label for="check-one">
           <input type="checkbox" name="check-one" id="check-one" value="checkone"/>
           <i></i> <span>Checkbox 1</span> 
    	</label>
    									
    	 <label for="check-two">
    	    <input type="checkbox" name="check-two" id="check-two" value="check-two"/>
    	     <i></i> <span>Checkbox 2</span>
    	</label>   
      </div>
  </div>

CSS

::-moz-selection {
 background: white;
}

::selection { background: white; }



.checkboxes label {
  display: block;
  position: relative;
  padding: 6px 2px 10px 20px;
  line-height: 28px;
  font-weight: normal;
  cursor: pointer;
   border: 1px solid #e6e7e8;
  border-radius:4px;
  background:#f6f6f6;
  margin-top:16px;
  -webkit-tap-highlight-color: transparent;
}



.checkboxes label i {
  display: inline-block;
  height: 28px;
  position: relative;
  top: 6px;
  font-style: normal;
  color: #ccc;

}

.checkboxes label span {
  color: #2c3e50;
  display: unset;
  font-size: 16px;
  line-height: 25px;
  margin-left: 14px;
  min-width: 256px;
}
.checkboxes input[type="radio"],input[type="checkbox"] { display: none; }

.checkboxes input[type="radio"] + i:before, input[type="checkbox"] + i:before {
  font-family: 'FontAwesome';
  font-size: 24px;
  height: 25px;
  width: 25px;
  display: table;
}

.checkboxes input[type="radio"]:checked + i, input[type="checkbox"]:checked + i {
  position: relative;
  -webkit-animation: icon-beat 0.1s ease;
  animation: icon-beat 0.1s ease;
}

.checkboxes input[type="radio"]:checked + i + span, input[type="checkbox"]:checked + i + span {
  -webkit-transition: all 0.1s ease;
  transition: all 0.1s ease;
}

.checkboxes input[type="radio"] + i:before { content: "\f10c"; }

.checkboxes input[type="radio"]:checked + i:before { content: "\f111"; }

.checkboxes input[type="radio"]:checked + i + span + label,input[type="radio"]:checked + i + label:before { color: rgba(245,245, 245); }

.checkboxes input[type="checkbox"] + i:before { content: "\f10c"; }

.checkboxes input[type="checkbox"]:checked + i:before { content: "\f05d"; }

.checkboxes input[type="checkbox"]:checked + i + span,
input[type="checkbox"]:checked + i:before { color: #2581BC; }

.labelselected{ background-color: red !important; }

JavaScript

$('input[type="checkbox"]').click(function(){
    var label = $('label[for='+this.id+']');
    if($(this).is(":checked"))
        label.addClass("labelselected");
    else
        label.removeClass("labelselected"); 
});