JSFiddle - React, Tailwind, and code Playground

HTML

<fieldset id="jform_toppings" class="checkboxes">
    <ul>
        <li>
            <input type="checkbox" id="jform_toppings0" name="jform[toppings][]" value="anch" />
            <label for="jform_toppings0">Anchovies</label>
        </li>
        <li>
            <input type="checkbox" id="jform_toppings1" name="jform[toppings][]" value="chor" />
            <label for="jform_toppings1">Chorizo</label>
        </li>
        <li>
            <input type="checkbox" id="jform_toppings2" name="jform[toppings][]" value="on" />
            <label for="jform_toppings2">Onions</label>
        </li>
        <li>
            <input type="checkbox" id="jform_toppings3" name="jform[toppings][]" value="mush" />
            <label for="jform_toppings3">Mushrooms</label>
        </li>
    </ul>
</fieldset>