JSFiddle - React, Tailwind, and code Playground

HTML

<div>Chars: <span id='length'></span>

</div>
<textarea id='txt' maxlength='150'></textarea>

CSS

TEXTAREA {
    width: 300px;
    height: 60px;
}

JavaScript

// "maxlength" code for older browsers including IE9 and previous versions
var txt = document.getElementById('txt');
txt.onkeyup = function () {
    var maxlength = parseInt(this.getAttribute("maxlength")) || 0;
    if (maxlength > 0 && this.value.length > maxlength) {
        this.value = this.value.substring(0, maxlength);
        alert('text was truncated to ' + maxlength + ' characters.');
    }
    document.getElementById('length').innerHTML = this.value.length.toString();
};
txt.onkeydown = function () {
    var maxlength = parseInt(this.getAttribute("maxlength")) || 0;
    if (maxlength > 0 && this.value.length >= maxlength && (event.keyCode || event.which) > 49) {
        return false;
    }
};