JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="your-text-area" maxlength="15"></textarea>

<div id="counter-div"></div>

JavaScript

$('#counter-div').hide('slow');
$('#your-text-area').on('keyup', function() {
    $('#counter-div').show('slow');
    // Store the maxlength and value of the field.
    var maxlength = $(this).attr('maxlength');
    var val = $(this).val();
    var vallength = val.length;
    $("#counter-div").html(vallength);
    
    // red color
    if (vallength >= 10) {
        $('#counter-div').css('color', 'red');
    }
    if (vallength <= 9) {
        $('#counter-div').css('color', '');
    }
    
    // Trim the field if it has content over the maxlength.
    if (vallength > maxlength) {
        $(this).val(val.slice(0, maxlength));
    }
});

//
$('#your-text-area').on('blur', function() {
    $('#counter-div').hide('slow');
});