JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://console.re/connector.js" data-channel="consolere-api-demo-size" id="consolerescript"></script>
<div class="test" style="width:300px;height:250px">
    <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-size" 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.size();
console.re.size('all P elements %s', document.getElementsByTagName('p')); 
console.re.size($('div.test')[0]); 
    
};

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