JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div id="container">
    <div id="menu" class="menu"></div>
      <div id="grid" class="grid"><b>ttt<br/>eeeee</b></div>
  </div>
  <div id="footer"></div>
</body></html>

CSS

html {
  background: #b3dced;
  background: -moz-linear-gradient(45deg, #b3dced 0%, #29b8e5 50%, #bce0ee 100%);
  background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#b3dced), color-stop(50%,#29b8e5), color-stop(100%,#bce0ee));
  background: -webkit-linear-gradient(45deg, #b3dced 0%,#29b8e5 50%,#bce0ee 100%);
  background: -o-linear-gradient(45deg, #b3dced 0%,#29b8e5 50%,#bce0ee 100%);
  background: -ms-linear-gradient(45deg, #b3dced 0%,#29b8e5 50%,#bce0ee 100%);
  background: linear-gradient(45deg, #b3dced 0%,#29b8e5 50%,#bce0ee 100%);
  height: 100%;
}

#container {
	position: absolute;
  margin: 20px;
}

#menu {
  position: absolute;
  width: 400px;
  height: 100px;
  left: 20px;
  top: 20px;
  outline: 6px groove grey;
  display: none;
}

  #menu div {
    float: left;
    width: 25%;
    height: 100%;
    outline: 1px solid blue;
  }

    #menu div:hover {
    background-color: cyan;
  }

#grid {
  position: absolute;
  width: 800px;
  height: 800px;
  left: 400px;
  -moz-transform: rotate(-45deg) skew(15deg, 15deg);
  -webkit-transform: rotate(-45deg) skew(15deg, 15deg);
  -ms-transform: rotate(-45deg) skew(15deg, 15deg);
  transform: rotate(-45deg) skew(15deg, 15deg);
}

.tile {
  float: left;
  width: 10%;
  height: 10%;
  outline: 1px solid red;
}

.tile:hover {
  background-color: cyan;
}

.tile.active {
  background-color: lime;
}

  .tile img {
    margin-left: -30px;
   /*Reverse ISO*/
  -moz-transform: rotate(45deg) skew(0, 0);
  -webkit-transform: rotate(45deg) skew(0, 0);
  -ms-transform: rotate(45deg) skew(0, 0);
  transform: rotate(45deg) skew(0, 0);
  }
b {position:absolute;
    display:block;
    left:0px;
}

JavaScript

var tileCount = 100;
var buildings = 4;
var activeTile;
//JSON object info

//DoOnLoad
$(document).ready(function () {
  setup();
});

function setup() {
  // Create Grid
  var grid = $('#grid');
  for (var i = 0; i < tileCount; i++) {
    var tile = document.createElement('div');
    tile.id = "t" + (i + 1);
    tile.className = "tile";
    tile.onclick = function () {
      if (activeTile) {
        activeTile.removeClass("active");
      }
      activeTile = $(this);
      $(this).addClass("active");
      tilePopup(this);
    };
    grid.append(tile);
  }

  //Create Menu
  var menu = $('#menu');
  for (var i = 0; i < buildings; i++) {
    var building = document.createElement('div');
    building.id = "b" + (i + 1);
    //building.className = "building";
    building.innerHTML = "Building " + (i + 1);
    building.onclick = function () {
      build(this.id);
    };
    menu.append(building);
  }
}

function tilePopup(obj) {
  $('#menu').show();
}

function build(type) {
  var building = document.createElement('img');
  building.className = type;
  building.title = "Building " + type;
  //building.src = "images/buildings/building1.png";
  building.src = "http://www.large-icons.com/stock-icons/large-factory/commercial_building-icon.gif";
  activeTile.innerHTML = null;
  activeTile.append(building);
}