JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<label><input type="checkbox"><span>send newsletter</span></label><br>
<label><input type="checkbox" checked disabled><span>I doubt it</span></label><br>
<label><input type="checkbox" disabled><span>well I never</span></label><br>
<label><input type="checkbox"><span>I agree with terms of use</span></label><br>
<label><input type="checkbox"><span>check to confirm</span></label>

CSS

input[type="checkbox"] { position: absolute; opacity: 0; z-index: -1; }
input[type="checkbox"]+span { font: 16pt sans-serif; color: #000; }
input[type="checkbox"]+span:before { font: 16pt FontAwesome; content: '\00f096'; display: inline-block; width: 16pt; padding: 2px 0 0 3px; margin-right: 0.5em; }
input[type="checkbox"]:checked+span:before { content: '\00f046'; }
input[type="checkbox"]:focus+span:before { outline: 1px dotted #aaa; }
input[type="checkbox"]:disabled+span { color: #999; }
input[type="checkbox"]:not(:disabled)+span:hover:before { text-shadow: 0 1px 2px #77F; }