JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="iframe_container">

</div>

<p>
Some Text 3
</p>
<br/>

<textarea id="html_box">
  <p class="p1">Some Text 1</p>
  <p class="p2">Some Text 2</p>
</textarea> 

<textarea id="css_box">
p.p1{	
	color: red;
	border: 3px dashed green;	
}

p.p2{	
	color: #ff0000;
	border: 3px dashed red;	
}
</textarea>
  
<button id="execute">Execute</button>

CSS

#iframe_container{
  width: 500px;
  height: 100px;
}

#iframe_container iframe{
  width: 500px;
  height: 100px;
}

p{
  color: #ff0000;
	border: 3px dashed red;
}

textarea{
  height: 200px;
}

JavaScript

$(function(){
	$("#execute").click(function(){
			var iframe = document.createElement('iframe');
    iframe.id = "iframe_result";

    content = 
  '<!doctype html>' + 
  '<html lang="en">' +
    '<head>' + 
      '<meta charset = "utf-8">' + 
    '</head>' +
    '<body>' +
      $("#html_box").val() +
    '</body>' +

    '<style>' + 
      $("#css_box").val() + 
    '</style>' +
  '</html>'

    iframe.src = 'data:text/html;charset=utf-8,' + encodeURIComponent(content);
    $('#iframe_container').empty().append( iframe );  
  });
});