JSFiddle - React, Tailwind, and code Playground

HTML

<div class="form-group newsletter">
    <div class="checkbox">
        <label><input name="newsletter" type="checkbox" value="Sign me up for exclusive discounts and style advice by email, post and text" aria-invalid="false">Sign me up for exclusive discounts and style advice by email, post and text</label>
    </div>
</div>

SCSS

.form-group {
    input {
        opacity: 0;
    }
    label {
        &:after {
            float: left;
            display: block;
                content: "";
            width: 52px; height: 52px;
                margin-right: 35px;
            background: red;
        }
        input:checked ~ &:after { // This. Not sure how to make this work
            background: green;
        }
    }
}