JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout-validation/1.0.2/knockout.validation.min.js"></script>
<input type="text" data-bind="value: username, valueUpdate: 'afterkeydown', css:{'error':(!username.isValid() && showErrors())}" />
<br/>
<button data-bind="click: submit">Submit</button>
<div data-bind="visible: showErrors, text: errors" />

CSS

.error{
    background:red;
}

JavaScript

function ViewModel() {
    var self = this;
    self.username = ko.observable().extend({
        required: true,
        email: true
    });
    self.showErrors = ko.observable(false);

    self.submit = function () {
        self.showErrors(true);
        if (self.isValid()) {
            // save data here   
        }
    }

    self.errors = ko.validation.group(self);
}

ko.validation.init({
    registerExtenders: true,
    messagesOnModified: true,
    insertMessages: false
});

ko.applyBindings(new ViewModel());