JSFiddle - React, Tailwind, and code Playground

HTML

<div id="html">
  <img src="http://placehold.it/500x300" class="mobile" />
</div>

<div id="css">
@media only screen and (max-width: 500px) {
.mobile {display: none !important;}
}
</div>

CSS

iframe {
    border: solid 1px red;
    margin:auto;
    width:99%;
    height:99%;
}

html, body { margin:auto; height: 100%; padding: 0; border: 0;}

#html, #css {display: none;}

JavaScript

$(function() {
    var $css = $("#css").html();
    var $html = $("#html").html();
    var $frame = $('<iframe id="myframe">');
    $('body').html( $frame );

    var doc = $frame[0].contentWindow.document;
    var $framehtml = $('html',doc);
    $framehtml.html($html);


    var $head = $("#myframe").contents().find("head");                
    $head.append($("<style/>", 
                   {type: "text/css" }));


    var $style = $("#myframe").contents().find("style");                
    $style.append($css);
});