JSFiddle - React, Tailwind, and code Playground

HTML

<div id="logEvents">
    <h2>Log</h2>
</div>

CSS

#logEvents {
    border: solid 1px #999;
    width: 400px;
    height: 160px;
    font-style: 'Courier New';
    margin-bottom: 20px;
}

h2 {
    margin: 0px;
    padding: 4px;
    font-size: 16px;
    border-bottom: solid 1px #999;
    background-color: #DEF;
}

.rowLog {
    font-size: 12px;
    border-bottom: solid 1px #CCC;
    padding: 4px;
}

.rowLog:even {
    background-color: #DDD;
}

JavaScript

var appendToLog = function (txt) {
    $('#logEvents').append("<div class='rowLog'>" + txt + "</div>");
}
var frameHTML = '<html><head><link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"></head><body>This frame uses the boostrap CSS</body></html>';

var frame2HTML = '<html><head></head><body>NO CSS in Header</body></html>';

$('body').append('<iframe id="iframeGenerator"></iframe>');
$('body').append('<iframe id="iframeGenerator2"></iframe>');

$('#iframeGenerator').contents().find('html').html(frameHTML);
$('#iframeGenerator2').contents().find('html').html(frame2HTML);

// Cloning the iframe
var clone = $('#iframeGenerator2').clone();
appendToLog("frame 2 content (visible): " + $('#iframeGenerator2').contents().find('body').text());
appendToLog("frame 2 clone content (not on dom): " + clone.contents().find('body').text());

// Adding clone to DOM, but keeping hidden
clone.attr('id', 'clonedFrame2');
$('body').append(clone);
$('#clonedFrame2').hide();  // on dom but hidden (optional)
appendToLog("frame 2 clone (on DOM): " + clone.contents().find('body').text());

// adding content again, but this time when clone is on the dom
clone.contents().find('html').html(frame2HTML);
appendToLog("frame 2 clone (on DOM): " + clone.contents().find('body').text());