JSFiddle - React, Tailwind, and code Playground

by Balázs Baumgartner

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="json">
  helloka
</div>

CSS

div {
  margin: 20px 0;
}

JavaScript

const shapes = [
	[{
		"type": "Rect",
		"width": "width - 122.5 - 122.5",
		"height": 10,
		"top": "height - 1037.5 - 10",
		"left": 122.5,
		"darkness": "glass"
	}],
	[{
		"type": "Rect",
		"width": "width - 122.5 - 122.5",
		"height": 10,
		"top": "height - 887.5 - 10 - 150 - 10 - 150 - 10",
		"left": 122.5,
		"darkness": "glass"
	}, {
		"type": "Rect",
		"width": "width - 122.5 - 100 - 122.5",
		"height": 10,
		"top": "10 + 150 + (height - 887.5 - 10 - 150 - 10 - 150 - 10)",
		"left": "122.5 + 100",
		"darkness": "glass"
	}, {
		"type": "Rect",
		"width": "width - 122.5 - 122.5",
		"height": 10,
		"top": "10 + 150 + 10 + 150 + (height - 887.5 - 10 - 150 - 10 - 150 - 10)",
		"left": 122.5,
		"darkness": "glass"
	}],
	[{
		"type": "Rect",
		"width": "width - 122.5 - 100 - 122.5",
		"height": 10,
		"top": "((height - 10 - 10 - 10 - 10 - 10) / 6) - 2.5",
		"left": "122.5 + 100",
		"darkness": "glass"
	}, {
		"type": "Rect",
		"width": "width - 122.5 - 100 - 122.5",
		"height": 10,
		"top": "(10 + (((height - 10 - 10 - 10 - 10 - 10) / 6) * 2)) - 2.5",
		"left": 122.5,
		"darkness": "glass"
	}, {
		"type": "Rect",
		"width": "width - 122.5 - 100 - 122.5",
		"height": 10,
		"top": "(10 + 10 + (((height - 10 - 10 - 10 - 10 - 10) / 6) * 3)) - 2.5",
		"left": "122.5 + 100",
		"darkness": "glass"
	}, {
		"type": "Rect",
		"width": "width - 122.5 - 100 - 122.5",
		"height": 10,
		"top": "(10 + 10 + 10 + (((height - 10 - 10 - 10 - 10 - 10) / 6) * 4)) - 2.5",
		"left": 122.5,
		"darkness": "glass"
	}, {
		"type": "Rect",
		"width": "width - 122.5 - 100 - 122.5",
		"height": 10,
		"top": "(10 + 10 + 10 + 10 + (((height - 10 - 10 - 10 - 10 - 10) / 6) * 5)) - 2.5",
		"left": "122.5 + 100",
		"darkness": "glass"
	}],
	[{
		"type": "Rect",
		"width": "width - 122.5 - 122.5",
		"height": 10,
		"top": "((height - 10 - 10 - 10 - 10) / 5) - 2.5",
		"left": 122.5,
		"darkness": "glass"
	}, {
		"type": "Rect",
		"width": "width - 122.5 - 122.5",
		"height": 10,
		"top": "(10 +...