JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<div id="test">Textnode</div>
CSS
*{margin: 0;padding: .73em; }
#test{
font-size: 13px;
color: #148cb5;
white-space: nowrap;
font-family: sans-serif;
text-align: center;
overflow: hidden;
/* COMMENT OUT THIS LINE */
background: #fff;
padding: 5px;
border-radius: .46em;
-webkit-border-radius: .46em;
-moz-border-radius: .46em;
box-shadow: .15em .15em .3em rgba(0, 0, 0, 0.6), -.077em -.077em .3em rgba(0, 0, 0, 0.25) inset;
-webkit-box-shadow: .15em .15em .3em rgba(0, 0, 0, 0.6), -.077em -.077em .3em rgba(0, 0, 0, 0.25) inset;
-moz-box-shadow: .15em .15em .3em rgba(0, 0, 0, 0.6), -.077em -.077em .3em rgba(0, 0, 0, 0.25) inset;
border: .077em solid rgba(0, 0, 0, 0.2);
cursor: pointer;
}
JavaScript
var test=document.getElementById("test");
test.style.position='absolute';
html2canvas(test,{
"onrendered":function(canvas){
canvas.style.position='absolute';
canvas.style.top='80px';
document.body.appendChild(canvas);
}
});