JSFiddle - React, Tailwind, and code Playground

by Serge Zahharenko

HTML

<label>
  <input type="checkbox"/>
  <em></em>
  <span>Checkbox text</span>
</label>
<br/>
<label>
  <input type="radio"/>
  <em></em>
  <span>Radio button text</span>
</label>

CSS

label {position:relative;display:inline-block;overflow:hidden;}
label input[type=radio],
label input[type=checkbox] {position:absolute;bottom:100%;right:100%;}
label input[type=radio] + em,
label input[type=checkbox] + em {float:left;width:20px;height:20px;background:#fff;border:solid 1px #000;}
label input[type=radio] + em {border-radius:30px;}
label input[type=radio]:checked + em,
label input[type=checkbox]:checked + em {background-color:green;}
label span {display:inline-block;padding:0 0 0 5px;line-height:22px;}