JSFiddle - React, Tailwind, and code Playground

by fxi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.0/html2canvas.min.js"></script>


<span>before</span>
<hr>
<div id="a" class="mx-legend-vt-rule-color" style="opacity: 1; background-color: rgb(229, 5, 5); -webkit-mask-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAAXNSR0IArs4c6QAAAeRJREFUWEft173PDVEQx/HPQ4UWoRASL9F4K5QKnUhoJOJPoUKn83coNESlEnqCQlCQCIJOEPGakfPIfTZ79549uzdsck5ys3uTc2a+mfmd2ZkVE1srE+NVgZedsf8hwuuxD4cbv2A7g7uzQRgbeAfO4wS+4zau4FVyugkHG2AHsGFOZt5j67KAd+MetjWcv8UdHMFeet2bpQCvwx5cxckRNRywgyWxMaX00ExaI6WR6tL1C8/xAPfTM97ftBns0vD2GahVwEhpRLR0fcXjBthDfMw12AZ8DNexJddIxr5buIAn+Jaxf+6WNuB3PWEjpU9TKo83bzVe42h6DmH9c7Yv8Gc8mtFZaC3+f0okO/GiQbULLweTJgNdkvjZAAu4Z/ixwHlEfFmls1dNzA1SBV5aupLhGuGcCO/HZZzqaExyNd133xfcxMVUtxfe4ICNlm5zX08j7/+A+IjFx+bvaitr13B2ZOel5oLl3CLg+DjM609LHZeeC3lEw9UZ4eYtX92c2+yXVoksv20QWQc7QlaBqyQa8qiSqJKokugYAGodRq0SpVWitIEZem6NbPtoeKjj0vMLgSfXXk6ugZ/ciBRaC+hLOP0Ppo+YMm4k/2vmuQDLnSJKL8zo5yrw6CFtGJxchH8DBTt4LQAUR0kAAAAASUVORK5CYII=&quot;); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; height: 40px; width: 40px;"></div>
<span>after</span>
<hr>

CSS

body {
  background:#ccc;
  
}

JavaScript

html2canvas(a).then(function(canvas) {
    document.body.appendChild(canvas);
});