JSFiddle - React, Tailwind, and code Playground

HTML

<label class="checkbox">
  <input type="checkbox" class="checkbox__input">
  <div class="checkbox__faux-checkbox">
    <svg class="checkbox__checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></svg>
  </div>
  <span class="checkbox__label">Click Me</span>
</label>

SCSS

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;

  &__input {
    clip-path: inset(100% 100% 100% 100%);

    &:checked {
      ~ .checkbox__faux-checkbox {
        border-color: #babac5;
        
        > .checkbox__checkmark {
          display: block;
          fill: green;
        }
      }
    }
  }

  &__checkmark {
    width: 12px;
    height: 12px;
    display: none;
  }

  &__faux-checkbox {
    height: 16px;
    width: 16px;
    border: 1px solid #ccc;
    margin-right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__label {
    text-transform: uppercase;
    letter-spacing: .05rem;
  }
}