JSFiddle - React, Tailwind, and code Playground

HTML

<head>
  <script>
function draw() {
  var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = "#4D4E53";
    ctx.fillRect(25,25,100,100);
    ctx.fillRect(150,25,100,100);
    ctx.fillRect(275,25,100,100);
    ctx.fillRect(400,25,100,100);
    
    ctx.fillStyle = '#0095DD';
    ctx.fillRect(50,50,50, 50);
    ctx.save();
    ctx.translate(-15, -15);
    ctx.fillRect(175,50,50,50);
    ctx.restore()
    ctx.save();
    ctx.translate(147, -207);
  	ctx.rotate((Math.PI / 180) * 45);
    ctx.fillRect(300,50,50,50);
    ctx.restore()
    ctx.save();
    ctx.scale(0.75, 0.75)
    ctx.fillRect(575,75,50, 50);
    ctx.restore();
    
    ctx.fillStyle = "#000";
    ctx.font = "14px PT-sans";
    ctx.fillText("base", 60, 160);
    ctx.fillText("translate(-15, -15)", 135, 160);
    ctx.fillText("rotate((Math.PI/180)*45)", 253, 160);
    ctx.fillText("scale(0.75, 0.75)", 410, 160);
}
  </script>
  <style type="text/css">
    canvas {border: 1px solid grey;}
  </style>
</head>
<body onload="draw();" >
  <canvas id="canvas" width="530" height="190"></canvas>
</body>