JSFiddle - React, Tailwind, and code Playground

by Ilya Karpuk

HTML

<!-- http://codepen.io/rgralb/pen/wbmEk -->

CSS

.Console {
    min-height: 20px;
    padding: 0;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
    font-family: "Helvetica", "Arial", "FreeSans", "Verdana", "Tahoma", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", sans-serif;
}

.Console .gray {
    color: #808080;
}

.Console .blue {
    color: #0000FF;
}

.Console .brown {
    color: #C41F16;
}

.Console p {
    margin: 0;
    padding: 2px 19px 2px 19px;
    border-bottom: 1px solid #E5E4E2;
}

.Console p > img {
    width: 14px;
    height: 14px;
    padding-right: 5px;
    vertical-align: middle;
}

JavaScript

function Default(value, def) {
    return typeof value !== 'undefined' ? value : def;
}

function Console(opt) {
    opt = opt || {};
    var container = Default(opt.container, document.body);
    var width = Default(opt.width, 800);
    var height = Default(opt.height, 300);

    this.dom = document.createElement("div");
    this.dom.setAttribute("class", "Console");
    this.dom.style.width = width + "px";
    this.dom.style.height = height + "px";
    container.appendChild(this.dom);
}

Console.prototype.log = function () {
    var args = arguments;
    var p = [];
    p.push( "<p class='log' >" );
    p.push( "<img  src='https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-right-01-16.png'/>" );

    for (var i = 0; i < args.length; i++) {
        var color = "";
        
        switch ( typeof args[i] ){
            case "object": color = "gray"; break;
            case "number": color = "blue"; break;
            case "string": color = "brown"; break;
        }
        p.push( "<span class='" + color + "'>" );
        p.push( JSON.stringify( args[i] ) );
        p.push( "</span> " );
        
    }
    p.push( "</p>" );
    
    this.dom.innerHTML += p.join("");
};

Console.prototype.error = function (){
	var args = arguments;
    var p = [];
    p.push( "<p class='log' >" );
    p.push( "<img  src='https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-right-01-16.png'/>" );

    for (var i = 0; i < args.length; i++) {
        var color = "";
        
        switch ( typeof args[i] ){
            case "object": color = "gray"; break;
            case "number": color = "blue"; break;
            case "string": color = "brown"; break;
        }
        p.push( "<span class='" + color + "'>" );
        p.push( JSON.stringify( args[i] ) );
        p.push( "</span> " );
        
    }
    p.push( "</p>" );
    
    this.dom.innerHTML += p.join("");
}

var newConsole = new Console({
    width: 500,
    height: 200
});

newConsole.log( 12312, 325634, {...