JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
<div class="order-search">
    <div data-bind="text: OrderNumber.Value"></div>
    <div data-bind="text: OrderNumber.Message"></div>
    <div data-bind="text: OrderNumber.IsValid"></div>
    
    <input type="text" id="searchOrderNumber" style="width: 89px;" maxlength="10"
        data-bind="value: OrderNumber.Value"
        data-value-update="keyup" />
</div>

JavaScript

jQuery(document).ready(function ($) {
    var viewModel = kendo.observable({
        OrderNumber: {
            Value: '',
            IsValid: function(){
                return (this.get('Value').length >= 8);
            },
            Message: function(){
                if(this.IsValid()){
                    return '';
                }
                else{
                    return 'Text length must be at least 8 characters.';
                }
            }
        }
    });

    kendo.bind($('.order-search'), viewModel);
});