JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script>
<button id="getpdf" style="border:1px solid red;margin:10px;position:absolute;z-index:999">click to pdf</button>
<div class="parent-area" style="height: 550px; width: 500px;">
	<div id="design-area" class="div-design-area">
		<div id="app-wrap" class="div-design-area" style="margin-top: 10px;">
					
			<!-- begin front design -->						
			<div id="view-front" class="labView active" style="">
				<div id="gridColumnUl"><ul class="list-unstyled list-inline top-number-ul"><li>0</li><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ul></div>
				<div id="gridRowUl"><ul class="list-unstyled list-inline row-number-ul"><li style="height: 62px;"><span class="rterow_serious" style="top: 60px;">1</span></li><li style="height: 62px;"><span class="rterow_serious" style="top: 60px;">2</span></li><li style="height: 62px;"><span class="rterow_serious" style="top: 60px;">3</span></li><li style="height: 62px;"><span class="rterow_serious" style="top: 60px;">4</span></li><li style="height: 62px;"><span class="rterow_serious" style="top: 60px;">5</span></li><li style="height: 62px;"><span class="rterow_serious" style="top: 60px;">6</span></li><li style="height: 62px;"><span class="rterow_serious" style="top: 60px;">7</span></li></ul></div>
				<div class="product-design"><img class="modelImage" id="front-img-images-1" src="http://localhost/wordpress/tshirtecommerce//uploaded/products/dg-designer-460b491b147748515590026740611038098.png" style="width: 500px; height: 500px; top: 0px; left: 0px; z-index: auto;"></div>
				<div class="design-area" id="svg-content" style="height: 500px; width: 500px; left: 0px; top: 52%; border-radius: 0px; margin: 0px auto; right: 0px; transform: translateY(-50%);"><div class="content-inner"><table class="grid" style="width:500px;...

CSS

.ps-container .ps-scrollbar-x-rail{position:absolute;bottom:3px;height:8px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;opacity:0;filter:alpha(opacity=0);-o-transition:background-color .2s linear,opacity .2s linear;-webkit-transition:background-color .2s linear,opacity .2s linear;-moz-transition:background-color .2s linear,opacity .2s linear;transition:background-color .2s linear,opacity .2s linear}
.ps-container:hover .ps-scrollbar-x-rail,.ps-container.hover .ps-scrollbar-x-rail{opacity:.6;filter:alpha(opacity=60)}
.ps-container .ps-scrollbar-x-rail:hover,.ps-container .ps-scrollbar-x-rail.hover{background-color:#eee;opacity:.9;filter:alpha(opacity=90)}
.ps-container .ps-scrollbar-x-rail.in-scrolling{background-color:#eee;opacity:.9;filter:alpha(opacity=90)}
.ps-container .ps-scrollbar-y-rail{position:absolute;right:3px;width:8px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;opacity:0;filter:alpha(opacity=0);-o-transition:background-color .2s linear,opacity .2s linear;-webkit-transition:background-color .2s linear,opacity .2s linear;-moz-transition:background-color .2s linear,opacity .2s linear;transition:background-color .2s linear,opacity .2s linear}
.ps-container:hover .ps-scrollbar-y-rail,.ps-container.hover .ps-scrollbar-y-rail{opacity:.6;filter:alpha(opacity=60)}
.ps-container .ps-scrollbar-y-rail:hover,.ps-container .ps-scrollbar-y-rail.hover{background-color:#eee;opacity:.9;filter:alpha(opacity=90)}
.ps-container .ps-scrollbar-y-rail.in-scrolling{background-color:#eee;opacity:.9;filter:alpha(opacity=90)}
.ps-container .ps-scrollbar-x{position:absolute;bottom:0;height:8px;background-color:#aaa;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-o-transition:background-color .2s linear;-webkit-transition:background-color.2s linear;-moz-transition:background-color .2s linear;transition:background-color .2s linear}
.ps-container.ie6 .ps-scrollbar-x{font-size:0}
.ps-container...

JavaScript

jQuery(document).on('click','#getpdf',function(){
	 //console.log("canvas");
    html2canvas(jQuery('#view-front'), 
    {
		background: '#fff',
		allowTaint: true,
		//console.log("adsfasdf");
      onrendered: function (canvas) {
        var a = document.createElement('a');
        // toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
        a.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
        console.log(a.href);
        a.download = 'somefilename.png';
        a.click();
      }
    });
  });