JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/brynja/cdn/brynja.js"></script>
<div id="root"></div>

CSS

.container {
  display: flex;
  justify-content: flex-start;
  flex-direction: column-reverse;
}
.container > * {
  padding: 0;
  margin: 0;
}


input, p { animation: updated 0.5s; }
@keyframes updated { 0% { background-color: orangered; } 100% { background-color: inherit; } }

JavaScript

const { render } = brynja;

const messages = new Proxy([], {
	set(arr, k, v) {
  	arr[k] = v;
    run();
    return true;
  }
});

const run = () => render(_=>_
	.child('input', _=>_
  	.prop('type', 'text')
    .prop('placeholder', 'Hello?')
    .on('change', e => {
    	messages.push(e.target.value);
      e.target.value = '';
    })
  )
  .child('div', _=>_
  	.class('container')
    .children('p', messages.length, (_, i)=>_
      .text(messages[i])
    )
  )
);

run();