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="dom-node">
  <div id="child"></div>
  scaled text which is a little longer and centered
</div>

<div id="result">
</div>

CSS

#dom-node {
  width: 100px;
  height: 100px;
  background-color: grey;
  text-align:center;
}

#child {
  height: 30px;
  width: 30px;
  background-color: lightgrey;
  margin:0 auto;
}

#result {
  margin-top: 10px;
}

JavaScript

domtoimage.toPng(document.getElementById('dom-node'), {
  width: 100,
  height: 100,
 
}).then(function(data) {
  var img = new Image();
  document.getElementById('result').appendChild(img);
  img.src = data;
})