JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://console.re/connector.js" data-channel="consolere-api-demo-clear" 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-clear" target="_new">Open 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 fload() {

console.re.clear();
console.re.info('first info message');
console.re.log('second log message');
    
};

// 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-clear";
document.body.appendChild(f);
f.onload = fload;