JSFiddle - React, Tailwind, and code Playground

by ElDarco

HTML

<div id="wrap_city"><div id="map" class="map"><div id="map_row"><div id="map_cell"><div data-num="489504" id="id_4" class="clet_city"></div></div><div id="map_cell"><div data-num="489505" id="id_4" class="clet_city"></div></div><div id="map_cell"><div data-num="489506" id="id_4" class="clet_city"></div></div><div id="map_cell"><div data-num="489507" id="id_4" class="clet_city"></div></div><div id="map_cell"><div data-num="489508" id="id_4" class="clet_city"></div></div><div id="map_cell"><div data-num="489509" id="id_4" class="clet_city"></div></div><div id="map_cell"><div data-num="489510" id="id_4" class="clet_city"></div></div></div><div id="map_row"><div id="map_cell"><div data-num="490504" id="id_4" class="clet_city"></div></div><div id="map_cell"><div data-num="490505" id="id_4" class="clet_city"></div></div><div id="map_cell"><div data-num="490506" id="id_4" class="clet_city"></div></div><div id="map_cell"><div data-num="490507" id="id_4" class="clet_city"></div></div><div id="map_cell"><div data-num="490508" id="id_4" class="clet_city"></div></div><div id="map_cell"><div data-num="490509" id="id_3" class="clet_city"></div></div><div id="map_cell"><div data-num="490510" id="id_4" class="clet_city"></div></div></div><div id="map_row"><div id="map_cell"><div data-num="491504" id="id_4" class="clet_city"></div></div><div id="map_cell"><div data-num="491505" id="id_3" class="clet_city"></div></div><div id="map_cell"><div data-num="491506" id="id_3" class="clet_city"></div></div><div id="map_cell"><div data-num="491507" id="id_4" class="clet_city"></div></div><div id="map_cell"><div data-num="491508" id="id_4" class="clet_city"></div></div><div id="map_cell"><div data-num="491509" id="id_3" class="clet_city"></div></div><div id="map_cell"><div data-num="491510" id="id_4" class="clet_city"></div></div></div><div id="map_row"><div id="map_cell"><div data-num="492504" id="id_4" class="clet_city"></div></div><div id="map_cell"><div data-num="492505" id="id_3"...

CSS

#wrap_city {
    border: 1px dashed #000000;
    position:absolute;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari and Chrome */
    top: -440px;
    left: 300px;
}
#map {
    display: table;
    position: absolute;
    left: 0px;
}

#map_row {
    display: table-row;
}

#map_cell {
    display: table-cell;
}

.clet_city {
    width: 150px;
    height: 150px;
    z-index: 1;
}
#id_3 {
    background-color: #3001f9;
}
#id_4 {
    background-color: #ce3c07;
}
.cell{
    width: 45px;
    height: 45px;
    border: 1px solid #000000;
    display: inline-block;
}