JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test_box">
    <div id="warning"></div>
   <input type="text" id="text_text">
</div>

CSS

#warning { display: none; }

JavaScript

$(document).ready(function(){
    var input = $('#text_text');
    var warning = $('#warning');
    input.on('keyup', function(){
       var val = $(this).val();
        if ( val.length > 3 ) {
            warning.html('hello').css('display', 'block');
            l = val.length
            var input = document.getElementById("text_text");
            input.setSelectionRange(l-3, l);
            input.focus();
        }
        else {
             warning.css('display', 'none');
        }
    });   
    
});