JSFiddle - React, Tailwind, and code Playground

by lottikarotti

HTML

<label>
  <input type='radio' name='field' value='0'>
  <span></span>
</label>
<label>
  <input type='radio' name='field' value='1'>
  <span></span>
</label>
<label>
  <input type='radio' name='field' value='2'>
  <span></span>
</label>

CSS

input{
  position: absolute;
  left: -9999px;
}

label{
  cursor: pointer;
}

input + span{
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: #ddd;
}

input:checked + span{
  background-color: lightblue;
  box-shadow: 0 0 10px rgba(0, 0, 0, .07);
}