JSFiddle - React, Tailwind, and code Playground

HTML

<iframe id="viewer"></iframe>

JavaScript

var css = "html,body { width:100%; height:100%; background:wheat;";
  var js = 'window.onload = ()=>document.body.innerHTML+="Hi";';
  var html = `<!DOCTYPE html>
    <html>
      <head>
        <link rel="stylesheet" href="/css/main.css"></link>
        <script src="/js/main.js"></scr`+`ipt>
      </head>
      <body>
         <img src="/imgs/logo.png"></img>
      </body>
    </html>`;
  
  c = document.createElement("canvas"); c.width=c.height=16;
  ctx = c.getContext("2d");
  ctx.arc(8,8,6,0,Math.PI*2,false);
  ctx.fill();
  var img = c.toDataURL();
  
  let parser = new DOMParser;
  let doc = parser.parseFromString(html,"text/html");
  doc.querySelector("link").href = "data:text/css,"+encodeURIComponent(css);
  doc.querySelector("script").src = "data:text/js,"+encodeURIComponent(js);
  doc.querySelector("img").src = img;
  

var viewer = document.querySelector('#viewer');
viewer = viewer.contentWindow || viewer.contentDocument.document || viewer.contentDocument;
viewer.document.open();
viewer.document.write(doc.documentElement.outerHTML);
viewer.document.close();
viewer.document.open();
viewer.document.write(doc.documentElement.outerHTML);
viewer.document.close();