JSFiddle - React, Tailwind, and code Playground

HTML

<div class="textContainter">
    <label class="input-control checkbox focus">
        <input id="classAll" class="classAll input-control" type="checkbox" name="status" value="Item 1" tabindex="-1" checked="checked" />
        <span class="input-control-img"></span>
        <span class="input-control-text">test Item 1</span>
    </label>
</div>
<div class="textContainter">
    <label class="input-control checkbox focus">
        <input id="classAll" class="classAll input-control" type="checkbox" name="status" value="Item 2" tabindex="-1" checked="checked" />
        <span class="input-control-img"></span>
        <span class="input-control-text">test Item 2</span>
    </label>
</div>

CSS

label.input-control {
    display: inline-block;
    overflow: hidden;
}
.textContainter .focus {
    outline: 1px dotted !important;
}
.input-control, .input-control .input-control-body {
    position:relative;
}

label.input-control input {
    left: -9999px;
    position: absolute;
}

label.input-control.checkbox .input-control-img {
    background-image: url("http://blogs.digitss.com/wp-content/uploads/2010/04/fancy-radio-checkbox.png");
}
label.input-control .input-control-img {
    background-position: 0 0;
    background-repeat: no-repeat;
    width: 20px;
}
label.input-control span {
    cursor: pointer;
    float: left;
    height: 20px;
}