JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/Semantic-Org/Semantic-UI/next/dist/semantic.js"></script>
<link rel="stylesheet" href="https://rawgit.com/Semantic-Org/Semantic-UI/next/dist/semantic.css">
<form class="ui form">
    <div class="field">
        <div class="ui error message"></div>
    </div>
    
    <div class="field">
        <div class="ui primary button">Submit</div>
    </div>
    
    <div class="field">
        <label>Multiple Numbers</label>
        <input type="text" name="numbers[]" data-validate="numbers_1" value="" />
    </div>
    
    <div class="field">
        <input type="text" name="numbers[]" data-validate="numbers_2" value="" />
    </div>
    
    <div class="field">
        <input type="text" name="number" data-validate="number" value="" />
    </div>
    
    <div class="field">
        <input type="text" name="numbers[]" data-validate="numbers_3" value="" />
    </div>
    
</form>

CSS

body {
    padding: 1em;
}

JavaScript

// Add javascript here
$(".ui.form")
.submit(function() {
    return false;
})
.form({
		on: 'blur',
		inline: true,
    fields: {
        number: {
            identifier: "number",
            optional: false,
            rules: [
                {type: 'integer', prompt: 'Please enter a valid integer'}
            ]
        },
        numbers: {
            identifier: "numbers_1",
            optional: false,
            rules: [
                {type: 'integer', prompt: 'Please enter a valid integer'}
            ]
        },
        numbers: {
            identifier: "numbers_2",
            optional: false,
            rules: [
                {type: 'integer', prompt: 'Please enter a valid integer'}
            ]
        },
        numbers: {
            identifier: "numbers_3",
            optional: false,
            rules: [
                {type: 'integer', prompt: 'Please enter a valid integer'}
            ]
        }
    },
    
    onSuccess: function() {
        alert("All valid");
    }
});