JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="f-checkbox">
<label class="f-label" for="f-field">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure cumque voluptatem nisi incidunt praesentium quibusdam sit in alias velit consectetur facere amet voluptates possimus, aliquid nam omnis fugit eum molestias ducimus, saepe laboriosam, enim nobis. Omnis eveniet rem impedit, commodi mollitia assumenda beatae nulla consequuntur autem debitis fugiat voluptatem laudantium!
</label>
<input type="checkbox" id="f-field" name="f-field" value="1" aria-invalid="false">
</div>

CSS

.f-label {
  padding-left: 20px;
  position: relative;
  display: block;
  margin: 0;
}

  .f-checkbox.active:before {
    background-color: green;
  }

  .f-checkbox:before {
    width: 20px;
    height: 20px;
    content: '';
    background-color: red;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }

JavaScript

jQuery('.f-checkbox label').on('click', function(e){
	jQuery(this).parent('.f-checkbox').toggleClass('active');
	console.log('Test');
})