JSFiddle - React, Tailwind, and code Playground

by michaelschmid

HTML

<h1>
Treemaptask
</h1>

JavaScript

<!DOCTYPE html>
<!--    -----------------------------------------------------------------------------------------------------------------------

		Purpose :       Visualize a Wintel System in UBs with 

		Url		:		/dev/visualization/dev_TreemapTask.html

		----------------------------------------------------------------------------------------------------------------------- -->
<html lang="en">
<head>
	<title>nbDev:Treemap Task</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="author" content="00169124 Michael Schmid">

	<!-- CSS -->
	<link href="/netbase/CSS/font-awesome-5.2.0/css/all.min.css" rel="stylesheet" />
	<link href="/netbase/lib/bootstrap-4.1.3/css/bootstrap.min.css" rel="stylesheet">
	<link href="/netbase/CSS/netbase.min.css" rel="stylesheet" />
	<link href="/netbase/CSS/ubs.min.css" rel="stylesheet" />
	

	<script type="text/javascript" src="/netbase/lib/moment.min.js"></script>

	<script src="//d3js.org/d3.v4.min.js"></script>

	<!-- RequireJS Configuation without initializing the applicaiton -->
	<script src="/netbase/require.js" type="text/javascript"></script>

	<style>
		.row {
			margin-bottom: 10px;
		}

		h3, h4, h5 {
			margin-top: 1em;
		}

		.lihead {
			font: bold;
		}

		li {
			list-style: none;
			border-left: solid 1px whitesmoke;
			margin-bottom: 2px;
			margin-top: 5px;
		}

		/* nothing */
		.collapsibleList li {
			list-style-image: url('button.png');
			cursor: auto;
		}

		li.collapsibleListOpen {
			list-style-image: url('button-open.png');
			cursor: pointer;
		}

		li.collapsibleListClosed {
			list-style-image: url('button-closed.png');
			cursor: pointer;
		}

		li.collapsibleList::before {
			font-family: "Font Awesome 5 Free";
			font-weight: 900;
			content: "\f07c";
		}
		li.collapsibleListOpen::before {
			font-family: "Font Awesome 5 Free";
			font-weight: 400;
			content: "\f07c";
		}

		li.collapsibleListClosed::before {
			font-family: "Font Awesome...