JSFiddle - React, Tailwind, and code Playground

HTML

<p>Scratch 3 matching panels to win</p>
<div id="game">
    <div class="panel lose" id="panel0" data-backgroundimage="http://placehold.it/80&text=1" data-foregroundimage="http://i.imgur.com/dIjmcjR.jpg"></div>
    <div class="panel lose" id="panel1" data-backgroundimage="http://placehold.it/80&text=2" data-foregroundimage="http://i.imgur.com/dIjmcjR.jpg"></div>
    <div class="panel lose" id="panel2" data-backgroundimage="http://placehold.it/80&text=3" data-foregroundimage="http://i.imgur.com/dIjmcjR.jpg"></div>
    <div class="panel win" id="panel3" data-backgroundimage="http://i.imgur.com/KIPBuwg.jpg" data-foregroundimage="http://i.imgur.com/dIjmcjR.jpg"></div>
    <div class="panel win" id="panel4" data-backgroundimage="http://i.imgur.com/KIPBuwg.jpg" data-foregroundimage="http://i.imgur.com/dIjmcjR.jpg"></div>
    <div class="panel win" id="panel5" data-backgroundimage="http://i.imgur.com/KIPBuwg.jpg" data-foregroundimage="http://i.imgur.com/dIjmcjR.jpg"></div>
</div>

CSS

#game {
    width: 340px;
}
.panel {
    margin: 5px 10px;
    float:left;
    cursor:pointer;
}

JavaScript

/* HTML5 Rabid Scratch Effect
 * http://rabidflash.com/html5-scratch-card-effect/
 *
 */
if (typeof Object.create !== 'function') {
    ScratchCard.create = function (obj) {
        function F() {};
        F.prototype = obj;
        return new F();
    };
}
var scratchCardId = 0;
(function ($, window, document, undefined) {
    var scratchCardTemplate = $("<Canvas class='scratchCanvas' style='display:none'></Canvas>");

    var ScratchCard = {
        init: function (options, elem) {

            var self = this;

            self.elem = elem;
            self.$elem = $(elem);


            self.options = $.extend({}, $.fn.rabidScratchCard.options, options);
            self.options.backgGroundImage = self.$elem.data("backgroundimage");
            self.options.foreGroundImage = self.$elem.data("foregroundimage");

            self.loadedImages = 0;

            var canvasBgImg = new Image();
            canvasBgImg.onload = function () {
                self.newScratchCanvas = scratchCardTemplate.clone();
                self.$elem.html(self.newScratchCanvas);
                self.theCanvas = self.newScratchCanvas;

                self.ctx = self.theCanvas[0].getContext("2d");


                $(window).bind('mousedown', $.proxy(self.addDownHandler, self));
                self.theCanvas.bind('mouseup', $.proxy(self.addUpHandler, self));
                $(window).bind('mouseup', $.proxy(self.addUpHandler, self));
                $(window).bind('touchmove', $.proxy(self.touchmoveHandler, self));

                $(self.theCanvas).css({
                    "backgroundImage": "url(" + canvasBgImg.src + ")",

                })

                self.theCanvas[0].width = canvasBgImg.width;
                self.theCanvas[0].height = canvasBgImg.height;
                self.loadedImages++;

                self.theCanvas.css("display", "inline")
                self.initX = self.theCanvas.offset().left;
                self.initY = self.theCanvas.offset().top;


   ...