JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.rawgit.com/websanova/wScratchPad/99a9f63e/wScratchPad.min.js"></script>

<div id="elem" ></div>

CSS

#elem{
          width: 100%;
          border: solid 1px;
        }

JavaScript

$('#elem').css({ 'height':  $('#elem').width()/720*1080 + "px" });

$('#elem').wScratchPad({
  size        : 15,          // The size of the brush/scratch.
  bg          : 'https://i.imgur.com/INZNRau.jpg',  // Background (image path or hex color).
  fg          : 'https://i.imgur.com/wChp4U6.png',  // Foreground (image path or hex color).
  realtime    : true,       // Calculates percentage in realitime.
  scratchDown : null,       // Set scratchDown callback.
  scratchUp   : null,       // Set scratchUp callback.
  scratchMove : null,       // Set scratcMove callback.
  cursor      : 'url("https://cdn.rawgit.com/websanova/wScratchPad/99a9f63e/cursors/coin.png") 5 5, default' // Set cursor.
});