JSFiddle - React, Tailwind, and code Playground

HTML

<div id="readout">
    <iframe id="blob-iframe" frameborder="0" width="100%" height="100%"></iframe>
</div>

<div class="container">
    <span>HTML</span>
    <textarea name="tryit" id="html" rows="10"></textarea>
</div>
<div class="container">
    <span>CSS</span>
    <textarea name="css" id="css" rows="10"></textarea>  
</div>

CSS

.container {
    position: relative;
    width: 50%;
    display: inline-block;
}

.container span {
    background: #ddd;
    border: 1px solid #555;
    color: black;
    font-size: x-small;
    font-family: sans-serif;
    padding: 4px;
    position: absolute;
    top: 8px;
    right: 0;
    opacity: .6;
}

textarea {
    height: 200px;
    width: 100%;
    font-family: monospace;
}

#readout {
    height: 414px;
    width: 48%;
    border: 1px solid #999;
    float: right;
}

JavaScript

var $html = $('#html'),
    $css = $('#css'),
    $blobIframe = $('#blob-iframe'),
    cssNode = '<link href="" type="text/css" rel="stylesheet">';

function addCssNode () {
    $blobIframe.contents().find("head").append(cssNode);
    $css.trigger('keyup');
}

function HtmlkeyUpHndl () {
    var blob = new Blob([$(this).val()], {type: "text/html"});
    var blobURL = URL.createObjectURL(blob);
    $blobIframe.attr('src', blobURL);
    $blobIframe.load(function(){
        addCssNode();
    });
}

function CsskeyUpHndl () {
    var blob = new Blob([$(this).val()], {type: "text/css"});
    var blobURL = URL.createObjectURL(blob);
    $blobIframe.contents().find("link").attr('href', blobURL);
}

$html.on('keyup', HtmlkeyUpHndl);
$css.on('keyup', CsskeyUpHndl);
addCssNode();