JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <div class="container">
        <div class="label">Random input</div>
        <input
            style="width: 200px;"
            tabindex="1"
        />
    </div>
    <div class="container">
        <div class="label">Username</div>
        <input
            type="text"
            id="txtFirstName"
            tabindex="2"
            maxlength="25"
            style="width: 200px;"
            data-bind="value: FirstName, 
                       attr: {title: FirstNameErrorMessage },
                       css: {validationFailed: !IsValidFirstName() },
                       event: {blur: ValidateFirstName}" 
        />
        <div class="error" data-bind="html: FirstNameErrorMessage">
        </div>
    </div>
    <div class="container">
        <div class="label">Random input</div>
        <input
            style="width: 200px;"
            tabindex="3"
        />
    </div>
</form>

CSS

.container{
    padding:10px;
}
.label{
    width:100px;
    display: inline-block;
    text-align: right;
    padding-right:2px;
}
.error{
    color:red;
    display: inline-block;
    padding-left:5px;    
}

JavaScript

function TestValidate(){

    self = this;
    
    self.FirstName = ko.observable('');
    self.IsValidFirstName = ko.observable(false);
    self.FirstNameErrorMessage = ko.observable('');
    
    self.ValidateFirstName = function () {
        self.IsValidFirstName(true);
        self.FirstNameErrorMessage('');
        if (self.FirstName().length < 2) {
            self.IsValidFirstName(false);
            self.FirstNameErrorMessage('First Name is required');
        }
    }
}
5
ko.applyBindings(new TestValidate());