JSFiddle - React, Tailwind, and code Playground

by santosh_patnala

HTML

<div>
    <span>
        <input type="checkbox" name="chkAlpha" class="chkAlpha"/>
        <label for="chkAlpha" class="lblAlpha">Alpha</label>
    </span>
</div>

CSS

.chkAlpha {
    opacity: 0;
    float: left;
    width: 18px;
}
.chkAlpha + .lblAlpha{
    margin: 0;
    clear: none;
    padding: 5px 0 4px 24px;
    cursor: pointer;
    background: url(https://css-tricks.com/wufoo/themes/customradiosandcheckboxes/off.png) left center no-repeat; 
}

.chkAlpha:checked + .lblAlpha {
    background-image: url(https://css-tricks.com/wufoo/themes/customradiosandcheckboxes/check.png);
}