JSFiddle - React, Tailwind, and code Playground

by Karim AG

HTML

<div> <span id="bar" class="foo">hello</span>
    <div id="output"></div>
</div>
<iframe id="frame" src="test.html"></iframe>

CSS

* {
    color: red;
}
body { font-size:30px;}

JavaScript

$(document).ready(function () {
    var div = document.getElementById('output');
    var x = document.getElementById('frame').contentWindow.document.createElement('x');
	document.getElementById('frame').contentWindow.document.body.appendChild(x);
    var defautlStyles = window.getComputedStyle(x);
    var barStyles = window.getComputedStyle(document.getElementById('bar'));
    for (i = 0; i < defautlStyles.length; i++) {
        if (defautlStyles["" + defautlStyles[i]] != barStyles["" + barStyles[i]]) {
            var p = document.createElement('p');
            p.innerText += barStyles[i] + ": " + barStyles["" + barStyles[i]];
            div.appendChild(p);
        }
    }
});