JSFiddle - React, Tailwind, and code Playground

by andrei

HTML

<div class="legal twelve columns">
  <h3>Media Release</h3>
  <p>I consent to the reproduction and use by the Center of photographs, videos and other images and sound recordings of me, or the minor, without compensation, for advertising or other purposes in any and all media now existing or hereafter developed. I release the Center and other Released Parties from liability for any violation of any personal and/or proprietary right I or the child may have in connection with such reproduction or use. The Center is not responsible for 3rd parties photo and recording.
  </p>
  
    <label style="display:block; margin-left: 10px">
      <input type="checkbox" name="close-up-images" checked onclick="myFunction(this);" />
      Consent for close-up images/video (from 1 to 3 people in picture)
    </label>

    <label style="display:block; margin-left: 10px">
      <input type="checkbox" name="wide-shot-images" checked onclick="myFunction(this);" />
      Consent for wide shot images/video (more than 3 people in picture)
    </label>
    
    <script type="text/javascript">
      function myFunction(checkBox) {
        x.value = checkBox.checked ? "give consent" : "do not give consent";
      }

    </script>
  
  <p>
    <label>
      <input type="checkbox" id="WRT_6" name="WRT_6" value="" />
      I've read the above and agree.
    </label>
  </p>

</div>