JSFiddle - React, Tailwind, and code Playground

HTML

<h1>
    Hello, World!
</h1>
<p>
    Here is my website
</p>

CSS

#console {
    border: 1px solid #ccc;
    background-color: #eee;
    height: 5em;
    overflow: auto;
}

JavaScript

(function() {
    /* Settings that you can define */
    var settings = {
        id : 'console',
        containerTag: 'pre',
        itemTag: undefined,
        development: true
    };
    
    if (settings.development) {
        { /* constructor */
            var container = document.createElement(settings.containerTag);
            container.setAttribute('id', settings.id);
            document.body.insertAdjacentHTML('afterbegin', container.outerHTML);
            container = null;
        }
        
        /* Format the message if the item tag is specified */
        var htmlFormattedMessage = function(tag, message) {
            var item = document.createElement(tag);
            var text = document.createTextNode(message);
            item.appendChild(text);
            return item.outerHTML;
        }
        
        /* Format the message depending on the settings */
        var formatMessage = function(message) {
            return (settings.itemTag ?
                    htmlFormattedMessage(settings.itemTag, message) :
                    ['>', message, '\n'].join(' ') );
        }
        
        /* Override the console.log command */
        console.log = function (message) {
            var container = document.getElementById(settings.id) 
            container.insertAdjacentHTML('beforeend', formatMessage(message));
        };
    }
})();

console.log("Hello, World!");
console.log("Hello, World!");
console.log("Hello, World!");
console.log("Hello, World!");
console.log("Hello, World!");
console.log(console);