JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://semantic-ui.com/build/packaged/javascript/semantic.js"></script>
<link rel="stylesheet" href="http://semantic-ui.com/build/packaged/css/semantic.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/noisy/1.1.1/jquery.noisy.min.js"></script>
<div class="ui modal" id="ingredientAdd">
	<i class="close icon"></i>
	<div class="header">
		Add Ingredient
	</div>
	<div class="content">
		<div class="ui form segment">
			<div class="ui error message"></div>
			<div class="two fields">
				<div class="field">
					<label>Name</label>
					<input placeholder="Name" name="name" type="text">
				</div>
				<div class="field">
					<label>Description</label>
					<input placeholder="Description" name="description" type="text">
				</div>
			</div>

			<div class="inline field">
				<div class="ui checkbox">
					<input type="checkbox" name="more" id="ingredientAddMore">
					<label for="ingredientAddMore"></label>
				</div>
				<label>Add more details</label>
			</div>

			<div class="toggle hidden transition">
				<table class="ui two column table">
					<thead>
						<tr>
							<th>Name</th>
							<th>Amount</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>Protein</td>
							<td>
							<div class="field">
								<input placeholder="Amount may be entered in mg/100g" name="protein" type="text">
							</div></td>
						</tr>
						<tr>
							<td>Fat</td>
							<td>
							<div class="field">
								<input placeholder="Amount may be entered in mg/100g" name="fat" type="text">
							</div></td>
						</tr>
						<tr>
							<td>Carbs</td>
							<td>
							<div class="field">
								<input placeholder="Amount may be entered in mg/100g" name="carbs" type="text">
							</div></td>
						</tr>
					</tbody>
				</table>
			</div>

			<div class="ui green submit button">
				Submit
			</div>
		</div>
	</div>
</div>

CSS

html, body {
    height: 100%;
}
html, body {
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.hidden {
  display: none;
  visibility: hidden;
}

JavaScript

$(document).ready(function() {
    var settings = {
        inline : true,
        on : 'blur',
        onSuccess : function() {
            //THIS SHOULD DO SOMETHING :-(
            alert("TESTZ");
        }
    };
    
    var rules = {
        name : {
            identifier : 'name',
            rules : [{
                type : 'empty',
                prompt : 'Please enter a name'
            }]
        },
        description : {
            identifier : 'description',
            rules : [{
                type : 'empty',
                prompt : 'Please enter a description'
            }]
        }
    };
    
    $('#ingredientAdd .checkbox input').change(function() {
        $('#ingredientAdd .toggle').transition();
        if ($(this).prop('checked') == true) {
            settings.protein = {
                identifier : 'protein',
                rules : [{
                    type : 'empty',
                    prompt : 'Please provide protein (mg/100g)'
                }]
            };
            settings.fat = {
                identifier : 'fat',
                rules : [{
                    type : 'empty',
                    prompt : 'Please provide fat (mg/100g)'
                }]
            };
            settings.carbs = {
                identifier : 'carbs',
                rules : [{
                    type : 'empty',
                    prompt : 'Please provide carbs (mg/100g)'
                }]
            };
            
            $('#ingredientAdd .ui.form').form(settings);
        } else {
            //reset to default
            delete settings.protein;
            delete settings.fat;
            delete settings.carbs;
            $('#ingredientAdd .ui.form').form(settings);
        }
    });
    
    //form validation
    $('#ingredientAdd .ui.form').form(rules, settings);
    $('#ingredientAdd').modal('show');
});