JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://console.re/connector.js" data-channel="consolere-api-demo-bbcodes" id="consolerescript"></script>
<div class="test">
    <p class="t1">test 1</p>
    <p class="t2">test 2</p>
    <p class="t3">test 3</p>
    <p class="t4">test 4</p>
</div>
<div class="test-two">
    <p class="t5">test-two 1</p>
    <p class="t6">test-two 2</p>
    <p class="t7">test-two 3</p>
    <p class="t8">test-two 4</p>
</div>
<span class="link"><a href="http://console.re/consolere-api-demo-bbcodes" target="_new">Open this Console in New Window</a></span>

CSS

html, body {
    height: 100%;
    background: #fff;
}
iframe {
    width:100%;
    height:100%;
    border:0;
}
div {
    display:none;
}
.link {
    position: fixed;
    bottom: 10px;
    right: 25px;
}
.link a {
    color:gray;
    font-family: Arial;
    font-size: 12px;
}

JavaScript

function logRun() {

console.re.error('output [i]any[/i] [size=15][red]errors[/red][/size] using error log level');

console.re.info('output anything in colors: [red]%s[/red] [green]%s[/green] [blue]%s[/blue] [yellow]%s[/yellow] [orange]%s[/orange] [lime]%s[/lime] [white]%s[/white] [black]%s[/black]', 'red', 'green', 'blue', 'yellow',  'orange', 'lime', 'white', 'black');

};

// Javascript Remote Logging Console.Re API Demo
// Full API Doc: http://console.re#API

var f = document.createElement('iframe');
f.src = "http://console.re/consolere-api-demo-bbcodes";
document.body.appendChild(f);
f.onload = function() {
    setTimeout(logRun,500);
}