JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test_box">
    <input type="text" id="text_text">
    <div id="notice"> There are limit of character for home page title of this field </div>
</div>

CSS

#notice {
width: 200px;
height: 40px;
background-color: black;   
display:none;
color:white;
}
#test_box {
       width: 400px;
       height: 400px;

 }

JavaScript

$(document).ready(function() {
        var char_limit = 5;       
        $('#text_text').bind('keyup', function() {
            new_length = $('#text_text').val().length;
            if (new_length > char_limit) {
              $('#text_text').css('color','red');
                $('#notice').show();
            } else {
               $('#text_text').css('color', 'black');
               $('#notice').hide(); //wrong             
            }
        });
 });