JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div>
    <input id="check1" type="checkbox" name="check1" value="check1" />
    <label for="check1"><span><span></span></span>Checkbox</label>
</div>
<div>
    <input id="radio1" type="radio" name="radio" value="radio1" />
    <label for="radio1"><span><span></span></span>Radio1</label>
</div>
<div>
    <input id="radio2" type="radio" name="radio" value="radio2" />
    <label for="radio2"><span><span></span></span>Radio2</label>
</div>

CSS

/*hide checkbox and radio buttons*/
input[type=checkbox], 
input[type=radio] {
    width: 2em;
    margin: 0;
    padding: 0;
    font-size: 1em;
    opacity: 0; /*This is the part tht actually hides it*/
}

/*normalize the spacing*/
input[type=checkbox] + label,
input[type=radio] + label {
    display: inline-block;
    margin-left: -2em;
    line-height: 1.5em;
}

/*unchecked css*/
input[type=checkbox] + label > span,
input[type=radio] + label > span {
    display: inline-block;
    background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Face-sad.svg/48px-Face-sad.svg.png');
    width: 50px;
    height: 50px;
}

/*selected checkbox css*/
input[type=checkbox]:checked + label > span > span {
    width: 50px;
    height: 50px;
    display:block;
    background-image: url('http://wscont1.apps.microsoft.com/winstore/1x/a14c3995-34d7-454c-82e2-0c192e48b91a/Icon.173718.png');
}

/*selected radio css*/
input[type=radio]:checked + label > span > span {
    width: 50px;
    height: 50px;
    display:block;
    background-image: url('http://wscont1.apps.microsoft.com/winstore/1x/a14c3995-34d7-454c-82e2-0c192e48b91a/Icon.173718.png');
}