JSFiddle - React, Tailwind, and code Playground

HTML

<input id="i" size=50>
<button id="load">Load game</button>
<button id="next">Next move</button>
<div id="log">Please load a game</div>
<div id="c"></div>

CSS

* {font-family:monospace}
#c {width:240px; height:552px; border-left:1px solid #888; border-top:1px solid #888}
.cell {float:left; width:23px; height:23px; line-height:23px; border-right:1px solid #888; border-bottom:1px solid #888; text-align:center}

JavaScript

var board = [], list = [], ptr = 0, cleared;
var pce = {
  "I": [[15],[1,1,1,1],[15],[1,1,1,1]],
  "O": [[3,3],[3,3],[3,3],[3,3]],
  "T": [[7,2],[2,3,2],[2,7],[1,3,1]],
  "L": [[7,1],[3,2,2],[4,7],[1,1,3]],
  "J": [[7,4],[2,2,3],[1,7],[3,1,1]],
  "S": [[6,3],[1,3,2],[6,3],[1,3,2]],
  "Z": [[3,6],[2,3,1],[3,6],[2,3,1]]
};

function init() {
  var html = '';

  for(var y = 0; y < 23; y++) {
    for(var x = 0; x < 10; x++) {
      html += '<div id="c' + x + '_' + y + '" class="cell">' + (y == 0 ? x : '') + '</div>';
    }
  }
  document.getElementById('c').innerHTML = html;
  document.getElementById('load').onclick = loadGame;
  document.getElementById('next').onclick = nextMove;
  document.getElementById('i').value = "O00,T24,S02,T01,L00,Z03,O07,L06,I05,I19";
}

function loadGame() {
  list = document.getElementById('i').value.split(',');
  cleared = ptr = 0;

  for(var y = 0; y < 22; y++) board[y] = 0;
  board[y] = 0x3FF;

  drawBoard();
  initNext();
}

function nextMove() {
  if(ptr == list.length) {
    return;
  }

  var m = list[ptr++],
      p = pce[m[0]][m[1]],
      x, y, n, hit, score = 0;

  for(y = hit = 0; y < 23 && !hit; y++) {
    for(n = 0; n < p.length; n++) {
      hit |= board[y + n] & (p[n] << m[2]);
    }
  }
  for(n = 0; n < p.length; n++) {
    board[y - 2 + n] |= (p[n] << m[2]);
  }
  for(y = 22; y--;) {
    if(board[y] == 0x3FF) {
      for(n = y; n > 0; n--) {
        board[n] = board[n - 1];
      }
      cleared++;
      y++;
    }
  }
  drawBoard();
  initNext();
}

function initNext() {
  if(ptr < list.length) {
    var x, y, m = list[ptr], p = pce[m[0]][m[1]];

    for(y = 0; y < 4; y++) {
      for(x = 0; x < 10; x++) {
        setCell(x, y, y < p.length && ((p[y] << m[2]) & (1 << x)) ? 'fa4' : 'fff');
      }
    }
    document.getElementById('log').innerHTML = "Next move: " + m + " / cleared lines: " + cleared;
  }
  else {
    document.getElementById('log').innerHTML = "End of list / cleared lines: " + cleared;
  }
}

function...