JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wccf_product_field_master_container">

   <div id="wccf_product_field_taytteet_container" class="wccf_field_container wccf_field_container_product_field wccf_field_container_checkbox wccf_field_container_product_field_checkbox">
   
   <label for="wccf_product_field_toppings"><span class="wccf_label">Toppings</span></label>
   
   <input type="hidden" name="wccf[product_field][82][]" id="_wccf_product_field_toppings" value="">
   
   <ul>
      <li>
         <input type="checkbox" value="sauce" checked="checked" name="wccf[product_field][82][]" id="wccf_product_field_toppings_sauce" class="wccf wccf_product_field wccf_checkbox wccf_product_field_checkbox" data-wccf-field-id="82">
               <label for="wccf_product_field_toppings_sauce">Sauce</label>
      </li>
      <li>
          <input type="checkbox" value="sauce1" checked="checked" name="wccf[prod
         uct_field][82][]" id="wccf_product_field_toppings_sauce1" class="wccf wccf_product_field wccf_checkbox wccf_product_field_checkbox" data-wccf-field-id="82">
              <label for="wccf_product_field_taytteet_sauce1">Sauce 1</label>
     </li>

   </ul>
   </div>
</div>

CSS

#wccf_product_field_master_container {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}


.wccf_product_field_checkbox {
    margin-right: 10px !important;
}

ul {
  list-style-type: none;
}