JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
<textarea name="" id="text"></textarea>
<div class="word-counter">0/100</div>
</div>

CSS

.box {
width:500px;
border: 1px solid red;
position:relative;
display:table;
}
textarea {
width:500px;
height:80px;
padding-bottom: 20px;
}
.word-counter {
position:absolute;
bottom: 0;
right:0;
}

JavaScript

$('#text').keyup(function(e) {
    var length=parseInt($(this).val().length)+1;
     switch (e.keyCode) {
            case 8:  // Backspace
            length--;
             $('.word-counter').text(length+'/100');
             break;
            case 9:  // Tab
            case 13: // Enter
            case 37: // Left
            case 38: // Up
            case 39: // Right
            case 40: // Down
            break;

            default:
                 if(length<=100)
                {
                    $('.word-counter').text(length+'/100');
                }
                else
                {
                    return false;
                }

        }

    
       
    });