JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tail">
    <div>some line of text</div>
</div>
<button>Toggle updates</button>

CSS

#tail {
    border: 1px solid blue;
    height: 400px;
    width: 500px;
    overflow: hidden;
}

JavaScript

var tailcounter = 100;
var tailswitch = false;

// scroll to bottom on init
tailScroll();

// add line to log
function tailappend() {
    $("<div />").text("log line " + tailcounter).appendTo("#tail");
    tailcounter++;
    tailScroll();
}

// auto update every second
var t = setInterval(tailappend, 100);

// toggle updates button click
$("button").click(function (e) {
    e.preventDefault();
    switch (tailswitch) {
        case false:
            clearInterval(t); // turns off auto update
            tailswitch = true;
            alert("auto update off");
            break;
        case true:
            t = setInterval(tailappend, 1000); // restarts auto update
            tailswitch = false;
            alert("auto update on");
            break;
    }
});

// tail effect
function tailScroll() {
    var height = $("#tail").get(0).scrollHeight;
    $("#tail").animate({
        scrollTop: height
    }, 500);
}