JSFiddle - React, Tailwind, and code Playground

HTML

<title>IIS7</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>


<script src="click.js"></script>
<script src="date.js"></script>
<script src='jcanvas.min.js'></script>
<script src="text.js"></script>
<script src="ocanvas-2.7.3.min.js"></script>


<body>



<b>Nodes</b>
<br>

<div class="scrollbar">
<div class="content">

<canvas  id="NodeList" width="200" height="300" >
     
</canvas>
   
</div>
</div>



  
     
    
<div class="Display" id="Display">
<canvas id="NodeDisplay" width="300" height="300" style="border:2px solid black;" ></canvas>
<div id="overlayBeeld"></div>

<div class="beeld" style="border:1px solid black;" ></div>
</div>
   
   
    
    
      
    <div id="canvas-wrap">
     <canvas width="600" height="600" style="border:2px solid black;"></canvas>
    <div id="overlay"></div>
    <div class="een" style="border:1px solid black;" ></div>
    <div class="twee" style="border:1px solid black;" ></div>
   
    <div class="drie" style="border:1px solid black;" ></div>
    
     <div class="vier" style="border:1px solid black;" ></div>
   
      

 
    </div>

CSS

html, body {
            height: 100%;
            overflow: hidden;
          }
b {

margin-left: 75px;

}

#container {
                margin-left:auto;
                margin-right:auto;
                text-align:center;
                }

a img {
                border:none;
}


 
.scrollbar{
  
    height:1050px;
    border:1px solid #000;
    overflow-y:auto;
    overflow-x: hidden;
    position: fixed;



}
.content{
width:auto;
height:100%;


} 		

#Display {


float: left;



margin-left: 248px;
 






}           


.beeld
{
    
    
     max-height: 301px;  
    
     min-height: 301px;
    
     width: 600px;
    
     margin-left: 134px;
      overflow-y:auto;
	overflow-x:auto;
        position: absolute;
        text-align: center;
	
}



#NodeDisplay{

float: left;
height: 300px;
width: 600px;
margin-left: 133px;

	

}   



#canvas-wrap { 
    
position:fixed;                   
margin-left: 380px;
float: left;
position: fixed;
margin-top: 435px;


  
   }
#canvas-wrap canvas { 
    position:absolute; 
         top:0; 
         left:0; 
         z-index:0 } 

  
.een{
    
    height:120px;  
    min-height: 150px;
    width: 600px;
      overflow-y:auto;
	overflow-x:auto;
        position: relative;
    
}

.twee{
    height:120px;  
    min-height: 150px;
    width: 600px;
     overflow-y:auto;
	overflow-x:auto;
        position: relative;
}

.drie {
    max-height:70px; 
    min-height: 150px;
    width: 600px;
      position: relative;
      overflow-y:auto;
	overflow-x:auto;
}

.vier{
     max-height: 70px; 
     min-height: 145px;
     max-width: 600px;
      width: 600px;
      overflow-y:auto;
      overflow-x:auto;
      position: relative;
	
}







/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
  
*/

JavaScript

var mydata = 
            [{
  
  "name": "Name: Name Day of the Week",
  "version": "Version: 1.0.0",
  "LocalTimeZone": "Local Time Zone: CET",
  "country": "Country: NLD",
  "input": "Input: DateTime (Format see properties)<br>\n\
  Current Date Time = System Date Time <br>\n\
  Node Enabled = Y/N (Default Yes) <br>\n\
  Language = EN (Default EN)",
   "properties": "Properties: DateTime Format = ISO 8601 (Default)<br> \n\
   Current Date Time = System Date Time<br>\n\
CountryArea = +31 (NLD)<br>\n\
Time Zone = CET (Depends on Country/Area)<br>\n\
Daylight Saving = Y/N<br>\n\
DST Starts = (Depends on Country/Area)<br>\n\
DST Ends = (Depends on Country/Area)"

}, {
  "name": "Final",
  "text": "1001",
  "version": "1.2",
  "country": "NL"

}, {
  "name": "Direction",
  "text": "LucBen",
  "version": "1.5.8",
  "country": "CN"

}, {
  "name": "GoSS",
  "text": "55",
  "version": "5",
  "country": "BE"

}, {
  "name": "Cyber",
  "text": "KroOn",
  "version": "3.2.11",
  "country": "FR"

}, {
  "name": "Ultumate77",
  "text": "Nei",
  "version": "22",
  "country": "D"

}, {
  "name": "Ami",
  "text": "Da",
  "version": "1.0.0",
  "country": "VS"

}, {
  "name": "TestFasePartTwo-One",
  "text": "99ft22",
  "version": "0.0.1",
  "country": "CH"

}, {
  "name": "HerHavzunDibiAyni",
  "text": "GitteBag",
  "version": "1",
  "country": "TR"

}, {
  "name": "SPYH",
  "text": "500",
  "version": "1.1.1.1",
  "country": "BeneluxS"

}];
     
    var w = 150;
    var h = 100;
    var a = 20;
    
  var canvas = $('#NodeList').get(0);
var ctx = canvas.getContext('2d');

ctx.strokeStyle = "red";
canvas.height = 0;

var rects = [
    
    
    [a, 20, w, h, 'rect0'],
    [a, 130, w, h, 'rect1'],
    [a, 240, w, h, 'rect2'],
    [a, 350, w, h, 'rect3'],
    [a, 460, w, h, 'rect4'],
    [a, 570, w, h, 'rect5'],
    [a, 680, w, h, 'rect6'],
    [a, 790, w, h, 'rect7'],
    [a, 900, w, h, 'rect8']
   
    
   
];
for (var i = 0; i < rects.length; i++) {
    canvas.height =...