JSFiddle - React, Tailwind, and code Playground

HTML

<fieldset>
<legend>Throw:</legend>
	<button onclick="javascript:console.log('Hello World!');">log Message</button>
	<button onclick="javascript:console.warn('Hello World!');">warning Message</button>
	<button onclick="javascript:console.error('Hello World!');">error Message</button>
	<button onclick="syntaxError();">Syntax Error</button>	
</fieldset>
<br/>
<div id="logContainer"></div>
<script>
function log(style, message) {        
  $('#logContainer').append("<div class='"+style+"'>"+message+"</div>");
}
    
function syntaxError(){
  try{
    alter('Test');
  } catch(error){
    log('error', error.message);
  }
}
</script>

CSS

.notice{
  background-color:#ccccff;  
}

.warn{
    background-color:#ffffb2;
}

.error{
    background-color:#ff7f7f;
}

JavaScript

$(document).ready(function () {
    var original = window.console;
    window.console = {
        log: function () {
            log('notice', arguments[0]);
			  original.log.apply(original, arguments)
        }
        , warn: function () {
            log('warn', arguments[0]);
			original.warn.apply(original, arguments)
        }
        , error: function () {
            log('error', arguments[0]);
			original.error.apply(original, arguments)
        }
    };
	
});