JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<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.js"></script>
<form>
    <!-- ko template: { name: 'errorTemplate', data: { error_field: email } }-->
    <!-- /ko -->
    <input type="text" id="email" data-bind="value: email, validationElement: email, valueUpdate:'keyup'" /> <br/>
     <!-- ko template: { name: 'errorTemplate', data: { error_field: password } }-->
    <!-- /ko -->
    <input type="text" id="password" data-bind="value: password, validationElement: password, valueUpdate:'keyup'"/>
</form>

<script type="text/html" id="errorTemplate">
    Error: <span data-bind="validationMessage: error_field"></span>
</script>

CSS

.error { 
    border: 3px solid red; 
}

JavaScript

ko.validation.init({
    registerExtenders: true,
    messagesOnModified: true,
    insertMessages: false,
    parseInputAttributes: true,
    messageTemplate: 'errorTemplate',
    decorateInputElement: true,
    errorElementClass: 'error'
}, true);

var ViewModel = function(){
    this.email = ko.observable("")
        .extend({ required: true })
        .extend({ email: true });
    
    this.password = ko.observable("")
        .extend({ required: true });
};

var viewModel = new ViewModel();

viewModel.errors = ko.validation.group(viewModel);

ko.applyBindings(viewModel); // This makes Knockout get to work