JSFiddle - React, Tailwind, and code Playground

HTML

<div id="messages">
  <div class="message">
    Hello world1
  </div>
  <div class="message">
    Hello world2
  </div>
  <div class="message">
    Hello world3
  </div>
  <div class="message">
    Hello world4
  </div>
  <div class="message">
    Hello world5
  </div>
  <div class="message">
    Hello world7
  </div>
  <div class="message">
    Hello world8
  </div>
  <div class="message">
    Hello world9
  </div>
  <div class="message" >
    Hello world10
  </div>
  <div class="message">
    Hello world11
  </div>
  <div class="message">
    Hello world12
  </div>
  <div class="message">
    Hello world13
  </div>
  <div class="message">
    Hello world14
  </div>
  <div class="message">
    Hello world15
  </div>
  <div class="message" id="messagesid">
    Hello world16 here
  </div>
  <div class="message">
    Hello world17
  </div>
  <div class="message">
    Hello world18
  </div>
  <div class="message">
    Hello world19
  </div>
  <div class="message">
    Hello world20
  </div>
  <div class="message">
    Hello world21
  </div>
  <div class="message">
    Hello world22
  </div>
  <div class="message">
    Hello world23
  </div>
  <div class="message">
    Hello world24
  </div>
  <div class="message">
    Hello world25
  </div>
  <div class="message">
    Hello world26
  </div>
  <div class="message">
    Hello world27
  </div>
  <div class="message">
    Hello world28
  </div>
  <div class="message">
    Hello world29
  </div>
  <div class="message">
    Hello world30
  </div>
</div>

CSS

#messages {
  height: 200px;
  overflow-y: auto;
}

JavaScript

function scrollToBottom(){
	const messages = document.getElementById('messages');
	const messagesid = document.getElementById('messagesid');  
	messages.scrollTop = messagesid.offsetTop - 10;
}

scrollToBottom();
setInterval(scrollToBottom, 1000);