JSFiddle - React, Tailwind, and code Playground

HTML

<div id="game_container">
		<div id="info">
			<div id="time">Time: 60</div>
			<div id="score">Score: 0</div>
		</div>
	</div>

CSS

html, body{
			padding: 0;
			margin: 0;
			width: 100%;
			height: 100%;
			font-size: 18px;
			color: #dbcdb8;
			background-color: #3F3250;
		}
    
 #game_container{
			height: 100%;
			width: 100%;
		}

.row{
			width: 100%;
			height: 10%;
			margin: 0 auto;
			padding: 0;
			display: table;
		}
		
		.square{
			width: 10%;
			height: 100%;
			text-align: center;
			display: table-cell;
			vertical-align: middle;
			background-color: #3F3250;
		/*	border: 1px solid #fff; */
			padding: 1%;
		}
		
		.inside{
			height: 100%;
			width: 100%;
			border: 1px solid rgba(219, 205, 184, 0.3);
			border-radius: 5px;
		}
    
    #info{
			display: table;
			width: 100%;
			height: 10%;
			font-size: 20px;
			font-weight: bold;
		}
		
		#time, #score{
			display: table-cell;
			width: 50%;
			height: 100%;
			padding: 10px;
			vertical-align: middle;
			background-color: #3F3250;
		}
		
		#time{
			border-right: 1px solid #dbcdb8;
		}
		
		#score{
			border-left: 1px solid #dbcdb8;
		}

JavaScript

function fill_the_numbers(a){
			var container = "";
			var counter = 0;
			for(var i = 1; i <= 6; i++){
				container += "<div class='row'>";
				for(var j = 1; j <= 10; j++){
					container += "<div class='square'>";
					container += "<div class='inside'>";
					container += a[counter];
					container += "</div>";
					container += "</div>";
					counter++;
				}
				container += "</div>"
			}
			//$("#game_container").html(container);
			$("#info").after(container);
}

var numbers = [1,2,3,4,5,6,7,8,9,10,
							11,12,13,14,15,16,17,18,19,20,
							21,22,23,24,25,26,27,28,29,30,
							31,32,33,34,35,36,37,38,39,40,
							41,42,43,44,45,46,47,48,49,50,
							51,52,53,54,55,56,57,58,59,60];	
              
fill_the_numbers(numbers);