JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div class="container">
<div class="row">
    <div class="col-md-12 game-box">
    </div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</body>

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700&subset=latin,cyrillic-ext,cyrillic);
@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300italic,300,400italic,500,500italic,700,700italic,900,900italic&subset=latin,cyrillic-ext,cyrillic);
@media (min-width: 1200px) {
    .container {
        width: 970px;
    }
}
.area{
    display:table;
    margin:0 auto;
    margin-top:20px;
    border-radius: 8px;
    background-color: #c4b485;
    padding:5px;
    border-collapse:separate;
    border-spacing:5px;
}
.area div[data-row]{
    display:table-row;
}
.area div[data-col]{
    display:table-cell;
    width:80px;
    height:80px;
    border-radius:4px;
}
div[data-value]{
    display: table-cell;
    width:100%;
    height:100%;
    border-radius: 4px;
    margin:0;
    text-align:center;
    vertical-align: middle;
}
div[data-value='0']{
    background-color: #ffffff;
}
div[data-value='2']{
    background-color: #dfd9c4;
    font-weight: bold;
    font-size:24px;
    color: #2e2e2e;
}

JavaScript

var config={
    mainContainer:$('.game-box'),
    x:4,
    y:4,
    startNumber:3
};
var gears={
    rand:(function(max,chance){
        var roll=Math.floor((Math.random()*max)+1);
        if(!chance){return roll;
        }else{return roll<=chance}
    })
};
function Matrix() {
    var mx=[];
    this.generate = function (y,x){
        mx=[];
        for(var i=1;i<=x;i++){
            mx[i]=[];
            for(var j=1;j<=y;j++){
                mx[i][j]=0;}}
        return mx;
    };
    this.dump = function(data){
        for(var i=1;i<=config.y;i++){
           console.log(data[i]);
         }
    };
    this.get = function () {
        return mx;
    }
};
var matrix = new Matrix();
var action={
    drawArea:function(){
                var area='<div class="area">'
                for (var iy=1;iy<=config.y;iy++) {
                    area+='<div data-row="'+iy+'">';
                    for (var ix=1;ix<=config.x;ix++) {
                        area+='<div data-col="'+ix+'" data-value="0"></div>';}
                    area+='</div>';}
                config.mainContainer.html(area+'</div>');
            },
    drawBox:function(x,y,val){
        $('div[data-row="'+y+'"]>div[data-col="'+x+'"]').html(val).attr('data-value',val);
    },
    startPosition:function(){
        for (var i=1;i<=config.startNumber;i++) {
            var nx=gears.rand(config.x);
            var ny=gears.rand(config.y);
            if(data[ny][nx]==0){data[ny][nx]=2;
            }else{i--}
            this.drawBox(nx,ny,2);
        }
        matrix.dump(data);
    },
    start:function(){
        data=matrix.generate(config.x,config.y);
        action.drawArea();
        action.startPosition();
    }
};
action.start();