JSFiddle - React, Tailwind, and code Playground

JavaScript

var styles = '<style> .pink { color: pink; width: 100px; height: 100px; } </style>';

var html = '<div class="pink"></div>'

// first try to create iframe with document.createElement
var iframe1 = document.createElement('iframe');
var head = $(iframe1).find('head');
// no head yet
console.log(head.length);

var head = $(iframe1).contents().find('head');
// still no head
console.log(head.length);

// lets try appending to body to get subdocument to generate
$('body').append('<iframe id="iframeGenerator" />');
// grab that iframe
var iframe2 = $('#iframeGenerator');
var head = iframe2.contents().find('head');
// now we have the head in the subdocument.
console.log(head.length);

// but we dont want this iframe to be in the Dom, so we must clone it and remove it from the dom.
var iframe2 = iframe2.clone();
// remove the iframe from dom
$('#iframeGenerator').remove();
// wat, our head is no longer there
var head = iframe2.contents().find('head');
console.log(head.length);

// lets try to get the contents of the iframe while its still in the dom...
$('body').append('<iframe id="iframeGenerator" />');
var iframe3 = $('#iframeGenerator');
var iframe3Contents = iframe3.contents();
$('#iframeGenerator').remove();
var head = iframe3.contents().find('head');
// sweet, we have the head again
console.log(head.length);
// but what does the contents look like?
console.log(iframe3Contents.get(0));
// lets try to put it in the dom?
// doesn't work because the selector has no context or something ...
$('body').append(iframe3Contents);
// lets try to put it back in an iframe
// same shit here
var generatedIframe = $('<iframe />').append(iframe3Contents);