JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.js"></script>

JavaScript

function takeSnapshotOfURL(url) {
  var iframe = document.createElement('iframe');
  iframe.src = url;
  iframe.style.cssText = 'position: absolute; opacity:0; z-index: -9999';
  document.body.appendChild(iframe);
  return new Promise(function(res, rej) {
    iframe.onload = function(e) {
      html2canvas(iframe.contentDocument.documentElement)
        .then(function(canvas) {
          document.body.removeChild(iframe);
          res(canvas);
        })
        .catch(rej);
    };
    iframe.onerror = rej;
  });
}

/// In jsfiddle we need to create a fake document to workaround same-origin restrictions.
var docStr = `<html><div id="target">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis eleifend elit. Donec lectus sem, scelerisque sit amet facilisis quis, gravida a lacus. Nunc at lorem egestas, gravida lorem quis, pulvinar ante. Quisque id tempus libero. Mauris hendrerit nunc risus, ac laoreet lectus gravida et. Nam euismod magna ac enim posuere sagittis. Fusce at egestas enim, eu hendrerit enim.
</div></html>`;
var myDocURL = URL.createObjectURL(new Blob([docStr], {
    type: 'text/html'
  }));
//// Now we can call the function like so:
takeSnapshotOfURL(myDocURL)
  .then(function(canvas) {
    document.body.innerHTML = 'This is a canvas -->';
    document.body.appendChild(canvas);
  });