JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://visjs.org/dist/vis.min.js"></script>
<link rel="stylesheet" href="http://visjs.org/dist/vis.min.css">
	<div id="visualization"></div>

CSS

.vis-center>.vis-content {
    overflow-x: hidden;
    overflow-y: scroll;
    height: 100%;
}
.vis-left>.vis-content {
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
}

JavaScript

var items = new vis.DataSet();
	var groups = new vis.DataSet();

	for(var i = 0; i < 20; i++){ 
	    groups.add({id:'id-' + i, 
	                content:'<div style="width:200px;">group-' + i + '</div>'}); 
	}
		
	for (var i = 0; i < groups.length; i++) 
	{	
		for (var x = 0; x < 8; x++) 
		{
			var s = new Date();
			s.setHours(8 + x);
			s.setMinutes(0);
		
			var e = new Date();
			e.setHours(8 + x);
			e.setMinutes(59);
		
			items.add({
				group: 'id-'+i,
				start: s,
				end: e,
				content: 'new item for test',
			});
		}
	}
	var options = {
  			    height:'300px', 
				stack:false, 
				orientation:'top'
			};
	var container = document.getElementById('visualization');
	var timeline = new vis.Timeline(container, items, groups, options);