JSFiddle - React, Tailwind, and code Playground

HTML

<label><input type="checkbox" hidden checked><span></span></label><label><input type="checkbox" hidden><span></span></label><label><input type="checkbox" hidden><span></span></label><label>
<input type="radio" name="radio" hidden checked><span></span></label><label><input type="radio" name="radio" hidden><span></span></label><label><input type="radio" name="radio" hidden><span></span></label><label>

CSS

input[type="checkbox"]+span,input[type="radio"]+span{-webkit-appearance:none;width:14px;height:14px;border:1px solid rgba(0,0,0,.3);outline:none;margin:5px;box-sizing:border-box;display:inline-block;}
input[type="checkbox"]:checked+span:before{content:"";display:block;width:9px;height:14px;border:0 solid rgb(58, 153, 45);border-width:0 2px 2px 0;-webkit-transform:rotateZ(45deg);margin:-6px 3px;pointer-events:none;}

input[type="radio"]+span{border-radius:100%;}
input[type="radio"]:checked+span:before{content:"";display:block;background:rgb(58, 153, 45);border-radius:100%;width:8px;height:8px;margin:2px;pointer-events:none;}