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;
display: table;
}
#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;
}
span {
display: table-cell;
vertical-align: middle;
}
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 += "<span>";
container += a[counter];
container += "</span>";
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);