JSFiddle - React, Tailwind, and code Playground

by lakshmipriya001

HTML

<div id="checkboxes">
  <input type="checkbox" name="rGroup" id="r1" />
  <label class="a" for="r1">A </label>
  <input type="checkbox" name="rGroup" id="r2" />
  <label class="a" for="r2">B </label>
  <input type="checkbox" name="rGroup" id="r3" />
  <label class="a" for="r3">C</label>
</div>

CSS

.a {
  background-color: #ffffff;
  font-family: Lato;
  font-size: 11.2px;
  font-weight: 500;
  text-align: center;
  color: #6a7c94;
  padding: 2px;
  width: 100px;
  height: 34.2px;
  margin-bottom: 15px;
  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.15);
}

#checkboxes input[type=checkbox] {
  display: none;
}

#checkboxes input[type=checkbox]:checked+.a {
  border-top: 2px solid #39cd90;
  color: rgb(57, 205, 144);
  padding-top: 0px;
}

JavaScript

$(document).ready(function() {
	
	var chk1 = $("#r1");
	var chk2 = $("#r2");
	
	chk2.on('change', function(){
		chk1.prop('checked',this.checked);
	});

  /*For getting values */
  $('.a').click(function() {
     var val=$(this).prev().val();
		alert(val);
  });
});