JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="input" style="width:100%;height:23px;font-size:14px"></textarea>

JavaScript

(function($) {
/*
* Auto-growing textareas;
*/
    $.fn.autogrow = function(options) {
    this.filter('textarea').each(function() {
        var $this = $(this),
        minHeight = $this.height(),
        lineHeight = $this.css('lineHeight');
        var shadow = $('<div></div>').css({
            position: 'absolute',
            top: -10000,
            left: -10000,
            width: $(this).width(),
            fontSize: $this.css('fontSize'),
            fontFamily: $this.css('fontFamily'),
            lineHeight: $this.css('lineHeight'),
            resize: 'none'
        }).appendTo(document.body);
        var update = function() {
            var val = this.value.replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/&/g, '&amp;')
            .replace(/\n/g, '<br/>');
            shadow.html(val);
            $(this).css('height', Math.max(shadow.height() + 20, minHeight));
        }
        $(this).change(update)
        $(this).keyup(update)
        $(this).keydown(update);
        update.apply(this);
    });
    return this;
    }
})(jQuery);
    
    $('#input').autogrow();