JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<ul>
	<li><strong>geometry</strong>
		<ul>
			<li><strong>location</strong>
				<ul>
					<li><strong>lat</strong>
						<ul>
							<li>37.3860517</li>
						</ul>
					</li>
					<li><strong>lng</strong>
						<ul>
							<li>-122.0838511</li>
						</ul>
					</li>
				</ul>
			</li>
			<li><strong>viewport</strong>
				<ul>
					<li><strong>northeast</strong>
						<ul>
							<li>37.4508789</li>
						</ul>
					</li>
					<li><strong>southwest</strong>
						<ul>
							<li>-122.0446721</li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
	</li>
	<li><strong>name</strong>
		<ul>
			<li>Mountain View</li>
		</ul>
	</li>
	<li><strong>scope</strong>
		<ul>
			<li>Google</li>
		</ul>
	</li>
	<li><strong>data</strong>
		<ul>
			<li><strong>customKey1</strong>
				<ul>
					<li>customValue1</li>
				</ul>
			</li>
			<li><strong>customKey2</strong>
				<ul>
					<li><strong>customSubKey1</strong>
						<ul>
							<li><strong>customSubSubKey1</strong>
								<ul>keyvalue</ul>
							</li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
	</li>
	<li><strong>types</strong>
		<ul>
			<li>locality</li>
			<li>political</li>
		</ul>
	</li>
</ul>

JavaScript

var jsonData = [
	{
		"geometry": {
			"location": {
				"lat": 37.3860517,
				"lng": -122.0838511
			},
			"viewport": {
				"northeast": {
					"lat": 37.4508789,
					"lng": -122.0446721
				},
				"southwest": {
					"lat": 37.3567599,
					"lng": -122.1178619
				}
			}
		},
		"name": "Mountain View",
		"scope": "GOOGLE",
		"data": {
			"customKey1": "customValue1",
			"customKey2": {
				"customSubKey1": {
					"customSubSubKey1": "keyvalue"
				}
			},
		},
		"types": [
			"locality",
			"political"
		]
	}
];