JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
 <link rel="stylesheet" href="https://resources/demos/style.css">
<div id="dialog" title="Basic dialog">
  <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

<canvas id="canvas" width=100px height =100px style="border:1px solid #000000;"></canvas>
<div></div>
<canvas id="canvas1" width=100px height =100px style="border:1px solid #000000;"></canvas>
<div></div>
<canvas id="canvas2" width=100px height =100px style="border:1px solid #000000;"></canvas>

CSS

#canvas .box-shadow-3d{
    box-shadow: 1px 1px 0px Black,
                2px 2px 0px Black,
                3px 3px 0px Black,
                4px 4px 0px Black,
                5px 5px 0px Black,
                6px 6px 0px Black;
}

JavaScript

/* Canvas Elements */
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'Blue';
ctx.fillRect(0, 0, 100, 100);
$( "#canvas" ).hover(function() {
  $( "#canvas" ).effect( "bounce", { times: 1 }, "slow" );
});

var canvas = document.getElementById('canvas1');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'Red';
ctx.fillRect(0, 0, 100, 100);
$( "#canvas1" ).hover(function() {
  $( "#canvas1" ).effect( "bounce", { times: 1 }, "slow" );
});

var canvas = document.getElementById('canvas2');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'Green';
ctx.fillRect(0, 0, 100, 100);
$( "#canvas2" ).hover(function() {
  $( "#canvas2" ).effect( "bounce", { times: 1 }, "slow" );
});

/* Modal Popup */
  $( function(){
    $( "#dialog" ).dialog({
      autoOpen: false,
      show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });
    $( "#canvas" ).on( "click", function() {
      $( "#dialog" ).dialog( "open" );
    });
    $( "#canvas1" ).on( "click", function() {
      $( "#dialog" ).dialog( "open" );
    });
    $( "#canvas2" ).on( "click", function() {
      $( "#dialog" ).dialog( "open" );
    });
    
    
  } );