JSFiddle - React, Tailwind, and code Playground

by bgrins

HTML

<textarea name="content" class="expanding">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam varius enim sit amet nisl consectetur mattis. Mauris cursus volutpat tincidunt. Morbi mi purus, interdum ut tempus vel, auctor consectetur enim. In non nibh orci. Nunc tempus rutrum lectus, id bibendum justo porta sed. Etiam vitae diam orci. Aliquam eu erat urna, ac bibendum felis. Vivamus pellentesque nibh eu lacus semper placerat. Donec molestie tellus non est rhoncus rhoncus. Sed sit amet mi at est elementum posuere non ac leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse ut nibh nec felis aliquam fermentum. Nunc sit amet nunc ligula. Cras blandit suscipit enim.

Nam adipiscing arcu a elit tincidunt ac venenatis risus aliquet. Nam sed felis tellus, at dignissim eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In tempus neque nec purus aliquam tincidunt. Donec orci nunc, pharetra suscipit luctus consequat, fringilla porta urna. Aliquam nisl dui, dapibus feugiat accumsan quis, suscipit vel libero. Nam nisl lectus, interdum sit amet blandit vitae, eleifend nec felis. Vestibulum porttitor tempor porta. Fusce sed felis et dui scelerisque molestie nec ac purus. Phasellus consectetur nibh ornare lorem facilisis id tincidunt nisl malesuada.
</textarea>

CSS

.expandingText {
   
   width: 81%; 
    padding: 20px;
    border: solid 5px red;
    
}

pre { color: red; z-index: 10; }

textarea {
    z-index: -1;
}

JavaScript

// Expanding Textareas
// https://github.com/bgrins/ExpandingTextareas

(function(factory) {
    // Add jQuery via AMD registration or browser globals
    if (typeof define === 'function' && define.amd) {
        define([ 'jquery' ], factory);
    }
    else {
        factory(jQuery);
    }
}(function ($) {
    $.expandingTextarea = $.extend({
        autoInitialize: true,
        initialSelector: "textarea.expanding"
    }, $.expandingTextarea || {});
    
    var cloneCSSProperties = [
        'lineHeight', 'textDecoration', 'letterSpacing',
        'fontSize', 'fontFamily', 'fontStyle', 
        'fontWeight', 'textTransform', 'textAlign', 
        'direction', 'wordSpacing', 'fontSizeAdjust', 
        'wordWrap', 
        'borderLeftWidth', 'borderRightWidth',
        'borderTopWidth','borderBottomWidth',
        'paddingLeft', 'paddingRight',
        'paddingTop','paddingBottom',
        'marginLeft', 'marginRight',
        'marginTop','marginBottom',
        'boxSizing', 'webkitBoxSizing', 'mozBoxSizing', 'msBoxSizing'
    ];
    
    var textareaCSS = {
        position: "absolute",
        height: "100%",
        width: "100%",
        resize: "none",
        margin: 0,
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
        "-webkit-box-sizing": "border-box",
        "-moz-box-sizing": "border-box",
        "box-sizing": "border-box"
    };
    
    var preCSS = {
        //visibility: "hidden",
        border: "0 solid",
        whiteSpace: "pre-wrap",
        margin: 0,
        "-webkit-box-sizing": "border-box",
        "-moz-box-sizing": "border-box",
        "box-sizing": "border-box" 
    };
    
    var containerCSS = {
        position: "relative"
    };
    
    function resize() {
        $(this).closest('.expandingText').find('expander').text(this.value + ' ');
    }
    
    $.fn.expandingTextarea = function(o) {
        
        if (o === "resize") {
            return this.trigger("input.expanding");
        }
        
...