JSFiddle - React, Tailwind, and code Playground

HTML

<div id="chat">
<div class="box" data-bind="foreach: messages" id="messages">
    <div data-bind="text: 'Me: ' + $data"></div>
</div>
<form action="#" data-bind="submit: submit">
    <input type="text" data-bind="value: input">
</form>
</div>

CSS

#chat {
    position: fixed;
    bottom: 0; 
    right: 0;
}

.box {
    width: 250px;
    height: 200px;
    border: 1px solid black;
    font-size: 2em;
    overflow-y: auto;
}

form input {
    width: 250px;
    display: block;
    border: 3px solid black;
}

JavaScript

var msgs = document.getElementById("messages");

function doScrollyStuff(){
    msgs.scrollTop = msgs.scrollHeight;
}



function View(){
    var self = this;
    
    self.messages = ko.observableArray('abcde'.split(''));
    self.input = ko.observable('');
    
    self.submit = function(){
        self.messages.push(self.input());
        self.input('');
        doScrollyStuff();
    }
}

ko.applyBindings(new View);