JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/tsayen/dom-to-image/master/src/dom-to-image.js"></script>
<div id="my-node-parent">
    <div id="my-node">
        <div id="my-node-child">A styled div</div>
    </div>
</div>

CSS

* {
    box-sizing: border-box;
}
#my-node {
    font-weight: bold;
}
#my-node-child {
    border: 1px solid lightgrey;
    padding: 1em;
}

JavaScript

var parent = document.getElementById('my-node-parent');
var node = document.getElementById('my-node');

var canvas = document.createElement('canvas');
canvas.width = node.scrollWidth;
canvas.height = node.scrollHeight;

domtoimage.toPng(node).then(function (pngDataUrl) {
    var img = new Image();
    img.onload = function () {
        var context = canvas.getContext('2d');

        conext.translate(canvas.width, 0);
        context.scale(-1, 1);
        context.drawImage(img, 0, 0);

        parent.removeChild(node);
        parent.appendChild(canvas);
    };

    img.src = pngDataUrl;
});