JSFiddle - React, Tailwind, and code Playground

HTML

<textarea>    if (textarea.scrollHeight > 305) {
            textarea.style.height = "1px";
    textarea.style.height = (3+textarea.scrollHeight)+"px";
        $(textarea).css("overflow-y","scroll");
        
    }
    else if (textarea.scrollHeight > 105){
        $(textarea).css("overflow-y","hidden");
        textarea.style.height = "1px";
        textarea.style.height = (3+textarea.scrollHeight)+"px";
    }
                 });</textarea>

CSS

textarea {
    overflow-y:hidden;
    height: 100px;
    color: blue ;
    max-height: 300px;
    min-height: 100px;
    overflow-x: hidden;
}

JavaScript

$("textarea").on("keyup",function($event) {
                 var textarea = $event.currentTarget;
    
    if (textarea.scrollHeight > 305) {
            textarea.style.height = "1px";
    textarea.style.height = (3+textarea.scrollHeight)+"px";
        $(textarea).css("overflow-y","scroll");
        
    }
    else if (textarea.scrollHeight > 105){
        $(textarea).css("overflow-y","hidden");
        textarea.style.height = "1px";
        textarea.style.height = (3+textarea.scrollHeight)+"px";
    }
                 });
$("textarea").on("focus",function($event) {
    var textarea = $event.currentTarget;
        if (textarea.scrollHeight > 105) {
            //textarea.style.height = textarea.scrollHeight;
            $(textarea).css("height",textarea.scrollHeight);
            if(textarea.scrollHeight > 305) {
            $(textarea).css("overflow-y","scroll");
            }
        }
    $( "textarea" ).unbind("focus");
    
});