JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="descrip"></textarea>

CSS

.hide {
    visibility:hidden;
}
#test {
    font-family: times;
    white-space: normal;
    /* CSS3 browsers  */
    white-space: -moz-normal !important;
    /* 1999+ Mozilla  */
    white-space: -normal;
    /* Opera 4 thru 6 */
    white-space: -o-normal;
    /* Opera 7 and up */
    word-wrap: break-word;
    /* IE 5.5+ and up */
    overflow: auto !important;
    /* Firefox 2 only */
    width:100px;
    font-size: 12px;
}
#descrip {
    font-family: times;
    font-size: 12px;
    height:115px;
    width:100px;
    overflow:hidden;
}
#message {
    color:red;
}

JavaScript

var over = false;
var num = 0;
$('#descrip').keypress(function (e) {
    var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
    var t = $(this).val();
    jQuery('<div/>', {
        "class": "hide",
        text: t,
        id: "test"
    }).appendTo('body');
    var h = $('#test').height();
    $('#test').remove();
    if (h >= 100) {
        num += 1;
        if (num == 1) {
            var div = '<div id="message">You have run out of room</div>'
            $('body').append(div);
        }
        over = true;
    } else {
        over = false;
        if (num >= 1) {
            $('#message').remove();
            num = 0;
        }
    }
    if (over) {
        // allow Ctrl+A
        if ((e.ctrlKey && key == 97 /* firefox */ ) || (e.ctrlKey && key == 65)
        /* opera */
        ) return true;
        // allow Ctrl+X (cut)
        if ((e.ctrlKey && key == 120 /* firefox */ ) || (e.ctrlKey && key == 88)
        /* opera */
        ) return true;
        // allow Ctrl+C (copy)
        if ((e.ctrlKey && key == 99 /* firefox */ ) || (e.ctrlKey && key == 67)
        /* opera */
        ) return true;
        // allow Ctrl+Z (undo)
        if ((e.ctrlKey && key == 122 /* firefox */ ) || (e.ctrlKey && key == 90)
        /* opera */
        ) return true;
        //page up, down, home end, left-right-up-down
        if (key > 32 && key < 40) return true;

        // if DEL or BACKSPACE is pressed
        return key == 46 || key == 8;
    }
});
$('#descrip').bind('copy paste cut', function (e) {
    var el = $(this);
    var text1 = $(el).val();
    setTimeout(function () {
        var text2 = $(el).val();
        jQuery('<div/>', {
            "class": "hide",
            text: text2,
            id: "test"
        }).appendTo('body');
        var h = $('#test').height();
        $('#test').remove();
        if (h >= 100) {
            num += 1;
            if (num == 1) {
                //var div = '<div id="message">You have run out of...