JSFiddle - React, Tailwind, and code Playground

HTML

<p>Scratch 3 matching panels to win</p>
<div id="game">
    <div class="panel lose" style="display:none" id="panel_blank" data-backgroundimage="/favicon.png" data-foregroundimage="http://jobs.jsfiddle.net/assets/logo-white-5b99252d3ff7c58fe9676707c400e31f.png"></div>
    
    <div class="panel lose" id="panel0" data-backgroundimage="/favicon.png" data-foregroundimage="http://jobs.jsfiddle.net/assets/logo-white-5b99252d3ff7c58fe9676707c400e31f.png"></div>
    <div class="panel lose" id="panel1" data-backgroundimage="/favicon.png" data-foregroundimage="http://jobs.jsfiddle.net/assets/logo-white-5b99252d3ff7c58fe9676707c400e31f.png"></div>
    <div class="panel lose" id="panel2" data-backgroundimage="/favicon.png" data-foregroundimage="http://jobs.jsfiddle.net/assets/logo-white-5b99252d3ff7c58fe9676707c400e31f.png"></div>
    <div class="panel win" id="panel3" data-backgroundimage="/favicon.png" data-foregroundimage="http://jobs.jsfiddle.net/assets/logo-white-5b99252d3ff7c58fe9676707c400e31f.png"></div>
    <div class="panel win" id="panel4" data-backgroundimage="/favicon.png" data-foregroundimage="http://jobs.jsfiddle.net/assets/logo-white-5b99252d3ff7c58fe9676707c400e31f.png"></div>
    <div class="panel win" id="panel5" data-backgroundimage="/favicon.png" data-foregroundimage="http://jobs.jsfiddle.net/assets/logo-white-5b99252d3ff7c58fe9676707c400e31f.png"></div>
</div>



<div id="output"></div>

CSS

#game {
    width: 340px;
}
canvas {  width:50px; height:50px 
}
.panel {
     width:50px; height:50px;
    margin: 5px 10px;border:1px solid red;
    float:left;
    cursor:pointer;
}
#output{ font-weight:bold; border: 1px soid red; padding: 10px; clear:both;}

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.newScratchCanvas.attr('id','canvy'+count);
                count++;
                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 =...