JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <input type="checkbox" id="c1" disabled />
    <label for="c1"><span></span>Check Box 1</label>
    <br>
    <input type="checkbox" id="c2"/>
    <label for="c2"><span></span>Check Box 2</label>
</div>

CSS

div {
    width:110px;
    height:50px;
    padding:20px;
    background:#40464b;
    border-radius:6px;
}

input[type="checkbox"] {
    display:none;
}

input[type="checkbox"] + label {
    color:#f2f2f2;
    font-family:Arial, sans-serif;
    font-size:14px;
    line-height: 25px;
}

input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url(http://webdesigntutsplus.s3.amazonaws.com/tuts/391_checkboxes/check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}

input[disabled] + label span {
    display:inline-block;
    width:16px;
    height:16px;
    margin:-1px 6px 0 0;
    vertical-align:middle;
    background:#ccc left top no-repeat;
    border-radius: 3px;
    -moz-box-shadow: inset 0 0 2px #000;
    -webkit-box-shadow: inset 0 0 2px#000;
    box-shadow: inner 0 0 5px #888;
    cursor:pointer;
}

input[type="checkbox"]:checked + label span {
    background:url(http://webdesigntutsplus.s3.amazonaws.com/tuts/391_checkboxes/check_radio_sheet.png) -19px top no-repeat;
}