JSFiddle - React, Tailwind, and code Playground

HTML

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

(function test(){
  console.re.trace('Stack Trace');
})();
   
};

// 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-trace";
document.body.appendChild(f);
f.onload = function() {
    setTimeout(logRun,500);
}