JSFiddle - React, Tailwind, and code Playground

by Shin Okada

HTML

<button class="download-btn" id="btnSave">Download Image</button>
        
<div class="container">
	<h1>TEST</h1> 
</div>
<div id="img-out"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js" integrity="sha512-tVYBzEItJit9HXaWTPo8vveXlkK62LbA+wez9IgzjTmFNLMBO1BEYladBw2wnM3YURZSMUyhayPCoLtjGh84NQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js" integrity="sha512-Qlv6VSKh1gDKGoJbnyA5RMXYcvnpIqhO++MhIM2fStMcGT9i2T//tSwYFlcyoRRDcDZ+TYHpH8azBBCyhpSeqw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

CSS

@import url('https://fonts.googleapis.com/css?family=Monoton');
	html, body {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: "Monoton", Helvetica, sans-serif;
		letter-spacing: 5px;
		text-align: center;
	}
	.container {
		background: #ab3428;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 80px;
		height: 80px;
		padding: 10px;
	}
	h1 {
		display: inline;
		font-size: 20px;
		line-height: 1.5;
		/* color: #000000; */
		color: transparent;
		background: linear-gradient(7deg, #f5ee9e 50%, #000000 0);
		-webkit-background-clip: text;
	}
  
  #btnSave{
    text-align: center;
    position: fixed;
    top: 0;
    width: 150px;
    z-index: 100;
}

.download-btn{
    font-size: 12px;
    padding: 5px;
    border: 2px solid rgb(33, 33, 33);
    margin: 10px; 
}

JavaScript

document.getElementById("btnSave").onclick = function(){
  html2canvas(document.querySelector(".container")).then(canvas => {
      document.body.appendChild(canvas)
  });
}