JSFiddle - React, Tailwind, and code Playground

by kborisov

HTML

<input id="check1" type="checkbox">
	<input id="check2" type="checkbox">
	<label for="check1"></label>
	<label for="check2"></label>

CSS

label:after {
  display: table-cell;  
  background-color: white;
  width:64px;
  height:64px;
  font-size: 24px;
  border-radius: 50%; 
  text-align: center;
  vertical-align: middle;
  border:solid gray 2px;
  color: black;
}
input:nth-of-type(1):not(:checked)~input:nth-of-type(2):not(:checked) ~ label:nth-of-type(1):after {
  content:"1"; 
  visibility: visible;
}

input:nth-of-type(1):checked~input:nth-of-type(2):not(:checked) ~ label:nth-of-type(2):after {
  content:"2"; 
  visibility: visible;
}

input:nth-of-type(1):checked~input:nth-of-type(2):checked ~ label:nth-of-type(1):after {
  content:"3"; 
  visibility: visible;
}

input:nth-of-type(1):not(:checked)~input:nth-of-type(2):checked ~ label:nth-of-type(2):after {
  content:"4"; 
  visibility: visible;
}

input{
visibility: hidden;
}
label{
visibility: hidden;
}