JSFiddle - React, Tailwind, and code Playground

HTML

<div class="form-group newsletter">
    <div class="checkbox">
        <input name="newsletter" type="checkbox" value="Sign me up for exclusive discounts and style advice by email, post and text" aria-invalid="false" id="checkbox1">
        <label for="checkbox1">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+label:after { // This. Not sure how to make this work
    background: green;
  }
}