JSFiddle - React, Tailwind, and code Playground

by gilly3

HTML

<textarea id="html"><div class="foo">Hello World</div></textarea>
<textarea id="css">div.foo {
    color: blue;
}</textarea>
<textarea id="js">alert($)</textarea>
<button id="run">Run</button>
<iframe id="preview"></iframe>

CSS

html, body {
    margin:0;
    padding:0;
}
#html {
    position:fixed;
    left:0;
    top:0;
    width:50%;
    height:50%;
    
    border-style:solid;
    border-color:black;
    border-width:0 1px 1px 0;
    margin:0 1px 1px 0;
}
#css {
    position:fixed;
    left:50%;
    top:0;
    width:50%;
    height:50%;
    border:none;
    
    border-style:solid;
    border-color:black;
    border-width:0 0 1px 0;
    margin:0 0 1px 0;
}
#js {
    position:fixed;
    left:0;
    top:50%;
    width:50%;
    height:50%;
    
    border-style:solid;
    border-color:black;
    border-width:0 1px 0 0;
    margin:0 1px 0 0;
}
#preview {
    position:fixed;
    left:50%;
    top:50%;
    width:50%;
    height:50%;
    width:50%;
    height:50%;
    margin:0;
    border:none;
}
#run {
    position:fixed;
    top:50%;
    right:50%;
    border-width:1px;
    border-style:solid;
    border-color:#94A8B5 #476B81 #476B81 #94A8B5;
    margin:0 3px 0 0;
    padding:3px 25px;
    font-size:14pt;
    border-radius:3px;
    font-weight:bold;
    font-family:sans-serif;
    background: #f2f6f8;
    background: -moz-linear-gradient(top, #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f6f8), color-stop(50%,#d8e1e7), color-stop(51%,#b5c6d0), color-stop(100%,#e0eff9));
    background: -webkit-linear-gradient(top, #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%);
    background: -o-linear-gradient(top, #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%);
    background: -ms-linear-gradient(top, #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f6f8', endColorstr='#e0eff9',GradientType=0 );
    background: linear-gradient(top, #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%);
    color:#2E404B;
    text-shadow: #ffffff 1px 1px 0;
}
#run:hover {
    cursor:pointer;
    background: #f6fafc;
    background: -moz-linear-gradient(top,...

JavaScript

var iframe = document.getElementById('preview');
var win = iframe.contentWindow
var doc = win.document;
doc.write('<!DOCTYPE html><html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><style></style>\x3cscript type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js">\x3c/script></head><body></body></html>');
$('#html,#css').bind('input', function() {
    $("style", doc).html($("#css").val());
    doc.body.innerHTML = $('#html').val();
}).trigger('input');
$('#run').click(function() {
    win.eval($('#js').val());
    $("script", doc.body).each(function() {
        win.eval($(this).html());
    });
});