JSFiddle - React, Tailwind, and code Playground

by Fernando Leal

HTML

<div id="chat">
  <div id="messages">
    <p>Teste</p>
    <p>Teste</p>
    <p>Teste</p>
    <p>Teste</p>
    <p>Teste</p>
    <p>Teste</p>
    <p>Teste</p>
    <p>Teste</p>
    <p>Teste</p>
  </div>
  <input type="text" id="input-message">
  <button id="btn-add">
    + Add Message
  </button>
</div>

CSS

#chat {
  background-color: #ddd;
}

#messages {
  background-color: #eee;
  width: 200px;
  max-height: 250px;
  overflow: auto;
}

JavaScript

$(function() {
  $('#btn-add').click(function() {
    var message = $('#input-message').val();
    $('#messages').append("<p>" + message + "</p>");

    var $target = $('#messages');
    $target.animate({
      scrollTop: $target.height()
    }, 1000);
  });
});