JSFiddle - React, Tailwind, and code Playground

HTML

<div class="message">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elit mi, mattis dictum placerat vel, lacinia nec metus. Etiam eu nunc ut sapien tempus luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque eget libero ligula, nec blandit metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elit mi, mattis dictum placerat vel, lacinia nec metus. Etiam eu nunc ut sapien tempus luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque eget libero ligula, nec blandit metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elit mi, mattis dictum placerat vel, lacinia nec metus. Etiam eu nunc ut sapien tempus luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque eget libero ligula, nec blandit metus.</div>

CSS

.message {
 margin: 4px;
 border: 1px solid green;    
}

JavaScript

$(function() {
    var colors = ["red", "blue", "yellow", "purple", "gray", "orange", "green"];


    for (var i = 0; i < 20; i++) {
        $('.message:first').clone().appendTo('body').css({
            backgroundColor: colors[i % 7]
        });
    }

    $(document).scrollTop($(document).height());

    $(document).on('scroll', function() {
        var scroll = $(document).scrollTop();
        if (scroll < 1) {
            var firstMsg = $('.message:first');
            $('body').prepend(firstMsg.clone());
            $(document).scrollTop(firstMsg.offset().top);
        }
    });

});