JSFiddle - React, Tailwind, and code Playground

CSS

* {margin:0; padding:0}

body {
    background: url(http://lorempixel.com/output/cats-q-g-960-960-7.jpg) no-repeat;    
    background-size: cover;
}

JavaScript

// Browser's console dump
function q(i) {
  console.log(i);
}

// DOM's console dump
function w(obj) {
	function syntaxHighlight(json) {
	    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
	    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
	        var cls = 'number';
	        if (/^"/.test(match)) {
	            if (/:$/.test(match)) {
	                cls = 'key';
	            } else {
	                cls = 'string';
	            }
	        } else if (/true|false/.test(match)) {
	            cls = 'boolean';
	        } else if (/null/.test(match)) {
	            cls = 'null';
	        }
	        return '<span class="' + cls + '">' + match + '</span>';
	    });
	}

	var json = JSON.stringify(obj, undefined, 4);

	$("#console pre").show().html(syntaxHighlight(json));
}

var consoleDiv = '<div id="console"><pre></pre></div>';

var css = '<style> \
	#console { \
		position: absolute; \
		top: 0; \
		left:0; \
		bottom: 0; \
		background: rgba(0, 0, 0, .85); \
		color: #868686; \
		overflow: hidden; \
		font-size: 8px; \
		line-height: 10px; \
		text-shadow: 0 0 3px #000; \
	} \
	\
	#console pre { \
		display: none; \
		padding: 4px; \
	} \
	\
	#console pre .string { \
		color: #8f9d6a; \
	} \
	\
	#console pre .number {  \
		color: #cda869;  \
	} \
	\
	#console pre .boolean { \
		color: #cf6a4c;  \
	} \
	\
	#console pre .null {  \
		color: #9b703f; \
	} \
	\
	#console pre .key { \
		color: #8a97aa; \
	} \
</style>';

$(document).ready(function() {

	$('head').append(css);
	$('body').append(consoleDiv);

    
    
    // TEST
    var object = {
        name: 'Cat',
        sex: true,
        age: 6,
        mouseId: [1,2,3,4,5,6,7,8,9],
        kittens: null
    }
        q(object);
        w(object);
    
    
});