JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.min.js"></script>
Name
<input type="text" data-bind="textInput: name" /><span data-bind="visible: validationObject.isValid">Valid</span>
<hr>Users
<div data-bind="foreach: users">
    <div>First name
        <input type="text" data-bind="textInput: firstName" />
    </div>
</div>
<div>
    <button data-bind="click: addUser">Add User</button>
</div>

JavaScript

User = function () {

    var self = this;

    // observables
    self.firstName = ko.observable();

    // validation
    self.validationObject = ko.validatedObservable({
        firstName: self.firstName.extend({
            required: true
        })
    });
};

IndexViewModel = function () {

    var self = this;
    // observables
    self.users = ko.observableArray();
    self.name = ko.observable();

    // functions
    self.addUser = function () {
        self.users.push(new User());
    };

    // validation
    self.validationObject = ko.validatedObservable({
        users: self.users,
        name: self.name.extend({
            required: true
        })
    });
};

ko.validation.init({
    grouping: {
        deep: true,
        live: true,
        observable: true
    }
});
var indexViewModel = new IndexViewModel();
ko.applyBindings(indexViewModel);