JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-container">
		<div id="map-container">
			<div id="map-draw">
				
			</div>
		</div>
	</div>

CSS

.tile{
	float:left;
	height:20px;
	width:20px;
	border:1px solid black;
	text-align: center;
}

JavaScript

var mapSizex=5;
var mapSizey=6;
var mapArray=[];

$(function() {
    console.log( "ready!" );
    $('#map-draw').html(drawMap());
});

function mapGenerator(){
	for(i=0;i<mapSizex;i++){
  	mapArray[i]=[];
		for(x=0;x<mapSizey;x++){
			mapArray[i][x]= getRandom(1,5);
      console.log(i,x,getRandom(1,5))
		}
	}
}
function drawMap(){
	mapGenerator();
  console.log(mapArray)
	var map='';
	tileID=0;
	for(i=0;i<mapSizex;i++){
		map=map+'<br style="clear: both;">';
		for(x=0;x<mapSizey;x++){
			map=map+'<div class="tile tileID'+tileID+'">'+mapArray[i][x]+'</div>';
			tileID++;
		}
	}return map;
}
function getRandom(min,max) {
    var x = Math.floor((Math.random() * max) + min);
    return x;
}