JSFiddle - React, Tailwind, and code Playground

JavaScript

MapData = {
	"height": 4,
	"layers": [{
		"data": [6, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 100, 101, 0, 0, 0, 0, 1, 0, 0, 1, 0, 115, 116, 0, 6, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0],
		"height": 4,
		"name": "1 (Terrain)",
		"opacity": 1,
		"type": "tilelayer",
		"visible": true,
		"width": 11,
		"x": 0,
		"y": 0
	}, {
		"data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
		"height": 4,
		"name": "2 (Items)",
		"opacity": 1,
		"type": "tilelayer",
		"visible": true,
		"width": 11,
		"x": 0,
		"y": 0
	}, {
		"data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
		"height": 4,
		"name": "3 (Animation Layer)",
		"opacity": 1,
		"type": "tilelayer",
		"visible": true,
		"width": 11,
		"x": 0,
		"y": 0
	}, {
		"data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
		"height": 4,
		"name": "4 (Collision Layer)",
		"opacity": 1,
		"type": "tilelayer",
		"visible": true,
		"width": 11,
		"x": 0,
		"y": 0
	}, {
		"data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
		"height": 4,
		"name": "5 (Collision Layer) - (Keep The Same)",
		"opacity": 1,
		"type": "tilelayer",
		"visible": true,
		"width": 11,
		"x": 0,
		"y": 0
	}, {
		"data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
		"height": 4,
		"name": "6 (Depth \/ Finishing Touches)",
		"opacity": 1,
		"type": "tilelayer",
		"visible": true,
		"width": 11,
		"x": 0,
		"y": 0
	}],
	"nextobjectid": 1,
	"orientation": "orthogonal",
	"properties": {

	},
	"renderorder": "right-down",
	"tileheight": 32,
	"tilesets": [{
		"firstgid": 1,
		"image":...