JSFiddle - React, Tailwind, and code Playground

by Zsanett Tamás

HTML

<textarea id="text"></textarea>

CSS

#text {
    font-size: 20px;
    height: 20px;
    width: 200px;
}

JavaScript

$('#text').on('keypress', function(e) {
    var that = $(this),
        textLength = that.val().length
    ;
    
    if(textLength > 30) {
        that.css('font-size', '5px');
    } else if(textLength > 20) {
        that.css('font-size', '10px');
    } else if(textLength > 10) {
        that.css('font-size', '15px');
    }
});