JSFiddle - React, Tailwind, and code Playground

HTML

<input type="radio" name="demo" id="demo1"><label for="demo1">input radio 1</label>
<input type="radio" name="demo" id="demo2"><label for="demo2">input radio 2</label>
<br>
<br>
<input type="checkbox" id="demo3"><label for="demo3">checkbox</label>

CSS

input[type='radio'], input[type='checkbox']{
  display:none;
}
input[type='radio']+label,
input[type='checkbox']+label{
  display:inline-block;
  background:#ccc;
  font:14px/33px arial,verdana,tahoma;
  color:#555;
  padding:0 15px;
  transition:all 0.5s ease;
}
input[type='radio']:checked+label,
input[type='checkbox']:checked+label{
  display:inline-block;
  background:#f30;
  color:#fff;
}
/* para el before */
input[type='radio']+label:before,
input[type='checkbox']+label:before{
  content:'<inactivo>'
}
input[type='radio']:checked+label:before,
input[type='checkbox']:checked+label:before{
  content:'<activo>'
}