JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  

</body>
</html>

JavaScript

// create a canvas element
const canvas = document.createElement('canvas');
canvas.width = 600;
canvas.height = 600;
document.body.appendChild(canvas);
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#000";
ctx.strokeStyle = "#fff";
// define the width and height of each block in the tetris grid
const blockSize = 20;

// define the width and height of the tetris grid
const width = 30;
const height = 30;

// create an empty grid
let grid = [];


// define a piece object
let piece;

// define the possible shapes for the tetris pieces
const shapes = [  
  [		
  	[0, 1, 0],
    [1, 1, 1],
    [0, 0, 0]
  ],
  [   
  	[2, 2],
    [2, 2]
  ],
  [   
  	[0, 3, 0, 0],
    [0, 3, 0, 0],
    [0, 3, 0, 0],
    [0, 3, 0, 0]
  ],
  [    
  	[4, 4, 0],
    [0, 4, 4],
    [0, 0, 0]
  ],
  [   
  	[0, 5, 5],
    [5, 5, 0],
    [0, 0, 0]
  ],
  [    
  	[6, 0, 0],
    [6, 6, 6],
    [0, 0, 0]
  ],
  [    
  	[0, 0, 7],
    [7, 7, 7],
    [0, 0, 0]
  ]
];
function randomShape() {
  var index = Math.floor(Math.random() * shapes.length);
  return shapes[index];
}
function gameInit(){
	piece = {
    x: 0,
    y: 0,
    blocks: randomShape()
	}

for (var i = 0; i < height; i++) {
  grid[i] = [];
  for (var j = 0; j < width; j++) {
    grid[i][j] = 0;
  }
}
}
// draw the piece on the grid
function draw() {
  for (var y = 0; y < piece.blocks.length; y++) {
    for (var x = 0; x < piece.blocks[y].length; x++) {
      if (piece.blocks[y][x]) {
        drawBlock(piece.x + x, piece.y + y);
      }
    }
  }
 
  for (var y = 0; y < grid.length; y++) {
    for (var x = 0; x < grid[y].length; x++) {
      if (grid[y][x] == 1) {
        drawBlock(x, y);
      }
    }
  }
}

// draw a block at the specified position on the grid
function drawBlock(x, y) {
  ctx.fillRect(x * blockSize, y * blockSize, blockSize, blockSize);
  ctx.strokeRect(x * blockSize, y * blockSize, blockSize, blockSize);
}

// clear the canvas
function clearCanvas() {
  ctx.clearRect(0, 0, canvas.width,...