JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="html"></textarea>
<textarea id="javascript"></textarea>
<textarea id="css"></textarea>
<iframe id='result'>
</iframe>

JavaScript

var iframe_ = $("iframe#result")[0].contentDocument.document;
	console.log(iframe_);
	var iframe = $("body", iframe_);
	var script = document.createElement( 'script' );
	script.type = 'text/javascript';
	iframe.append(script)
	iframe.append("<style type='text/css'></style><div id='r'></div>");
	$("div#body").css({
		background: "#f0f0f0",
		padding: "5px",
		width: "80%"
	});
	$("iframe#result, textarea#html, textarea#css, textarea#javascript").css({
		width: "45%",
		margin: "2.5px",
		height: "150px",
		border: "1px solid #ccc",
		resize: "none",
		background: "#fff"
	}).on("keyup", function(){
		iframe.find("script").text = $("textarea#javascript").val();
		iframe.find("style").html($("textarea#css").val());
		iframe.find("div#r").html($("textarea#html").val());
	});