JSFiddle - React, Tailwind, and code Playground

HTML

<div id="d01">

<div><input type="checkbox" id="c1" name="x" /><label for="c1"><b><!-- --></b><span>Option 1 und oder</span></label></div>
<div><input type="checkbox" id="c2" name="x" /><label for="c2"><b><!-- --></b><span>Option 2</span></label></div>
			
</div><div id="d02"><form action="">
			
<div><input type="radio" id="r1" name="x" /><label for="r1"><b><!-- --></b><span>Schlecht</span></label></div>
<div><input type="radio" id="r2" name="x" /><label for="r2"><b><!-- --></b><span>Zustimmung</span></label></div>
<div><input type="radio" id="r3" name="x" /><label for="r3"><b><!-- --></b><span>Lesenswert</span></label></div>

<div><input type="reset" value="VERWERFEN"/><input type="submit" value="SPEICHERN"/></div></form>
		
</div>

CSS

body                                        {background:#f8f8f8; font-family:consolas, sans-serif; font-size:17px}
#d01 div, #d02 div                          {margin-bottom:12px}
#d01 span, #d02 span                        {position:relative; top:2px; left:2px; color:darkblue}

label                                       {cursor:pointer; padding:2px 8px 5px 3px}

input[type="checkbox"], input[type="radio"] {display:none}
 
input[type="checkbox"] + label b,
input[type="radio"] + label b               {display:inline-block; width:19px; height:19px; margin:-1px 4px 0 0; vertical-align:middle}

input[type="checkbox"] + label b            {background:url(http://s14.directupload.net/images/140729/qsplni68.png) left top no-repeat}
input[type="checkbox"]:checked + label b    {background:url(http://s14.directupload.net/images/140729/qsplni68.png) -19px top no-repeat}
                                            
input[type="radio"] + label b               {background:url(http://s14.directupload.net/images/140729/qsplni68.png) -38px top no-repeat}
input[type="radio"]:checked + label b       {background:url(http://s14.directupload.net/images/140729/qsplni68.png) -57px top no-repeat}