JSFiddle - React, Tailwind, and code Playground

HTML

<p id='char-count'></p>
<div id="text-area" contenteditable="true"></div>

CSS

#text-area {
    width: 100%;
    max-height: 100px;
    min-height: 50px;
    overflow: auto;
    border: 1px solid #999;
}

JavaScript

maxCharacters = 140;

$('#char-count').text(maxCharacters);

$('#text-area').bind('input', function() {

    var count = $('#char-count');
    var characters = $(this).text().length;
    var newlines = $($(this).html()).length;

    if (!!newlines) newlines -= 1;

    characters += newlines;

    if (characters > (maxCharacters - 11)) {
        count.addClass('over');
    } else {
        count.removeClass('over');
    }
    count.text(maxCharacters - characters);

});