JSFiddle - React, Tailwind, and code Playground

by AlexMcP

HTML

<label>
    <input type="checkbox" name="optionsCheckboxes" value="option2">
</label>

CSS

input {margin: 20px 0 0 152px;}
label {height: 50px;width:150px;padding:10px;}

input:after {
    opacity: 1;
    content: " ";
    -webkit-border-radius: 5px;
    margin-top: -6px;
    height: 27px;
    background-position: -54px -28px;
    float: right;
    width: 93px;
    border: 1px solid #AAAAAA;
    background-image: url("http://labs.engageinteractive.co.uk/itoggle/images/itoggle.png");
}
input:checked:after {
    content: " ";
    -webkit-border-radius: 5px;
    margin-top: -6px;
    height: 27px;
    background-position: 0 -27px;
    float: right;
    width: 93px;
    border: 1px solid #AAAAAA;
    background-image: url("http://labs.engageinteractive.co.uk/itoggle/images/itoggle.png"); 
}