JSFiddle - React, Tailwind, and code Playground
HTML
<input type="button" value="Run Code" onclick="runCode()">
<input type="button" value="Show Code" onclick="showCode()">
<input type="button" value="Show Code in iFrame" onclick="showCode2()">
<div id="content">
Old content
</div>
JavaScript
var codeURL1="http://jsfiddle.net/echo/js/?js=alert('Code%20is%20running.')";
var codeURL2="/echo/html/";
//I'm only using 2 URLs because of security restrictions, you could just use 1
function runCode()
{
$('#content').html('<h3 style="color:#335c91">This is the header</h3><div class="holder"><script type="text/javascript" src="'+codeURL1+'"><\/script></div>');
}
function showCode()
{
//for more information about $.post, see here: http://api.jquery.com/jQuery.post/
$.post(codeURL2, {html:"alert('Code is running.')"}, function(data){showResult(data);});
//You wouldn't need the {html:alert('Code%20is%20running.')}, I only have it because of security restrictions and how jsFiddle works
}
function showCode2()
{
$('#content').html('<h3 style="color:#335c91">This is the header</h3><iframe src="'+codeURL1+'"><\/iframe>');
}
function showResult(data)
{
$('#content').html('<h3 style="color:#335c91">This is the header</h3><div class="holder">'+data+'</div>');
}