JSFiddle - React, Tailwind, and code Playground

by ilyautkin

HTML

<div id="tetris"></div>

CSS

#tetris {
  display: inline-block;
  width: 264px;
  height: 440px;
  border: 2px solid #000;
  line-height: 0px;
  background: #000;
}
#tetris b, #tetris i {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #000;
  border: 1px solid #333;
}
#tetris i {
  background: #fff;
  border-color: #999;
}

JavaScript

var Tetris = {
  config: {
    pitchID: "tetris",
    freeBrick: "<b></b>",
    filledBrick: "<i></i>",
    lineSeparator: "<br>"
  },
  pitch: {
    width: 12,
    height: 20,
    bricks: []
  }
};

for (var i = 0; i < Tetris.pitch.height; i++) {
  Tetris.pitch.bricks[i] = [];
  for (var j = 0; j < Tetris.pitch.width; j++) {
    Tetris.pitch.bricks[i][j] = 0;
  }
}
var tetrisDom = document.getElementById(Tetris.config.pitchID);
tetrisDom.innerHTML = '';
for (var i = 0; i < Tetris.pitch.bricks.length; i++) {
  for (var j = 0; j < Tetris.pitch.bricks[i].length; j++) {
    tetrisDom.innerHTML += Tetris.pitch.bricks[i][j]
                         ? Tetris.config.filledBrick
                         : Tetris.config.freeBrick;
  }
  tetrisDom.innerHTML += Tetris.config.lineSeparator;
}