JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <label class="checkbox">
            <input type="checkbox" data-toggle="checkbox" />
            <span class="btn-flat">Option</span>
            <input type="checkbox" data-toggle="unchecked" />
            <span class="btn-flat">Option</span>
        </label>
    </li>
</ul>

CSS

input {
    display: none;
}

.btn-flat {
    padding: 5px;
    border: 1px solid #ccc;
}

.checkbox.checked .btn-flat {
    background-color: #ccc;
}

JavaScript

$('.checkbox input').change(function() {
    if (this.checked) {
        $(this).parent('.checkbox').addClass('checked');
        $(this).attr('checked','checked');
    }else {
        $(this).parent('.checkbox').removeClass('checked');
        $(this).removeAttr('checked');
    }
});