JSFiddle - React, Tailwind, and code Playground

CSS

/* dark theme */
pre { padding: 20px; background-color:#000; color:#F1F2F3 }
.string { color: #65B042; }
.number { color: #89bdff; }
.boolean { color: #E28964; font-weight:bold; }
.null { color: #3387CC; font-weight:bold; }
.key { color: #bdb76b; }
/* light theme */
pre { padding: 20px; background-color:#EEE; color:#333 }
.string { color: #080; }
.number { color: #00C; }
.boolean { color: #909; font-weight:bold; }
.null { color: red; font-weight:bold; }
.key { color: #000; }

JavaScript

function output(inp) {
    document.body.appendChild(document.createElement('pre')).innerHTML = inp;
}

function pretty(obj) {
    var json = JSON.stringify(obj, undefined, 4);
    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 obj = {
    a: 1,
    'b': 'foo',
    c: [false, 'false', null, 'null',
    {
        d: {
            e: 1.3e5,
            f: '1.3e5',
            g: new Date()
        }}]
};

output(obj);
output(pretty(obj));