JSFiddle - React, Tailwind, and code Playground

HTML

<div id="log">
</div>

JavaScript

var log = document.querySelector('#log');

['log','warn','error'].forEach(function (verb) {
    console[verb] = (function (method, verb, log) {
        return function (text) {
            method(text);
            // handle distinguishing between methods any way you'd like
            var msg = document.createElement('p');
            msg.classList.add(verb);
            msg.textContent = verb + ': ' + text;
            document.body.appendChild(msg);
            log.appendChild(msg);
        };
    })(console[verb].bind(console), verb, log);
});

console.log('test');
console.error('error test');
console.warn('warning test');