JSFiddle - React, Tailwind, and code Playground

HTML

<div class="game" id="game"></div>

CSS

html, body, div, h1, h2, h3, h4, h5, h6, a, a img, p, ul, ol, li, span, fieldset , form, dl, dd, dt, table, tr, td, img{ 
	border: none;
	margin: 0; 
	outline: none;	
	padding: 0;
	overflow: hidden;
}

html{
    height:100%;	
		background: #000;
}

body{	
    height:100%;	
		position: relative;

	
	font: normal 10px arial, sans-serif;
	color: #fff;
}	

ul{
	list-style-type: none;
}

input[type="text"]:focus, input[type="password"]:focus, textarea:focus { outline: none; }

textarea{
	resize: none;
}

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	zoom:1;
}

.clear{
	clear: both;
}	
	
.hide{
	display: none;
}

.wrapped{
	width: 1000px;
	margin: 0 auto;
}

input::-webkit-input-placeholder {
	color: #0096ef;
}

input:-moz-placeholder {
	color: #0096ef;
}

/*************************************************************************************************************** GLOBAL_layout */

/*************************************************************************************************************** GLOBAL_blocks */
.game{
/*	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;*/
	z-index: 10;
	position: relative;
	background: #000;
	width: 300px;
	height: 100%;
	margin: 0 auto;
	padding-top: 20px;

	color: #fff;
}

.messager{
	width: 100%;
	height: auto;

	font: 20px arial, sans-serif;
	color: #fff;
}

	.messager_unit{
		
	}

.informer{
	width: 100%;
	margin-bottom: 20px;

	font: 16px arial, sans-serif;
	color: #fff;
}

	.informer td{
		border: 1px solid #ccc;
		padding: 5px;
	}	

	.informer .label{
		width: 75%;
	}

	.informer .value{
		width: 25%;

		text-align: center;
	}

.level_begin_label{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	background: #000;
	padding-top: 20px;

	color: #fff;
	text-align: center;
	font: 20px arial, sans-serif;
}

	.any_key_invitation{
		margin-top: 10px;

		font-size: 16px;
	}

.field{
	position: relative;
	background:...

JavaScript

var Helper = function() {
  this.randomIntFromZero = function(maxExclusive) {
    return Math.floor(Math.random() * (maxExclusive));
  };  

  this.levelScreenDisplay = function(level, parentElementTag) {
    $('<div class="level_begin_label" id="levelBeginLabel">Уровень: ' + level + '</div>').appendTo(parentElementTag);   

    setTimeout(function() { 
      $('<div class="any_key_invitation" id="anyKeyInvitation">Нажмите любую клавишу для старта</div>').appendTo('#levelBeginLabel');

      document.onkeypress = function() {
        document.onkeypress = undefined;
        $('#levelBeginLabel').remove();
      };          
    }, 1000);
  };         
};




var Informer = function(parentElement, infoArr) {   
  $('<table class="informer" id="informer"> \
      <tr><td class="label level_label">уровень: </td><td class="value level_value" id="levelValue"></td></tr> \
      <tr><td class="label score_label">счёт: </td><td class="value score_value" id="scoreValue"></td></tr> \
    </table>').appendTo('#' + parentElement);  

  $('<div class="messager" id="messager"></div>').appendTo('#' + parentElement); 

  this.refreshMessage('Игра началась', 'orange');
  this.refreshInfo(infoArr);
  this.messageCount = 0;
};

Informer.prototype = {

  refreshMessage: function(message, textColor) {  console.log(message);
    $('<div class="message_unit" id="messageUnit_' + this.messageCount + '" >' + message + '</div>').css({
      color: textColor
    }).appendTo('#messager');

    setTimeout(function() { 
      $('#messageUnit_' + this.messageCount).hide(3000, function() { 
        $('#messager').empty();
        $('.message_unit').remove();
      }); 

    }, 3000);

    this.messageCount++;    
  },

  refreshInfo: function(infoArr) {  console.log(infoArr);
    $('#scoreValue').text(infoArr['score']);
    $('#levelValue').text(infoArr['level']);
  }  

}


var Field = function(gameElementId, cellSize) { 
  this.cellSize = cellSize;

  $('<div class="field"...