JSFiddle - React, Tailwind, and code Playground

by Alejandro

HTML

<textarea rows="2" cols="50" id="demo">
Start typing!
</textarea>

JavaScript

$("#demo").mousemove(function (e) {
    var myPos = $(this).offset();
    myPos.bottom = $(this).offset().top + $(this).outerHeight();
    myPos.right = $(this).offset().left + $(this).outerWidth();

    if (myPos.bottom > e.pageY && e.pageY > myPos.bottom - 16 && myPos.right > e.pageX && e.pageX > myPos.right - 16) {
        $(this).css({ cursor: "nw-resize" });
    } else {
        $(this).css({ cursor: "" });
    }
})

//  the following simple make the textbox "Auto-Expand" as it is typed in
.keyup(function (e) {
    //  the following will help the text expand as typing takes place
    while ($(this).outerHeight() < this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth"))) {
        $(this).height($(this).height() + 1);
    };
});