JSFiddle - React, Tailwind, and code Playground

by Chitkala More

HTML

<link title="timeline-styles" rel="stylesheet" href="//cdn.knightlab.com/libs/timeline3/latest/css/timeline.css">
	<script src="//cdn.knightlab.com/libs/timeline3/latest/js/timeline.js">     </script>
<div id="Timeline"></div>

JavaScript

var dataObject =		{  
			"title":{  
				"text":{  
					"headline":"Nr Processo: 007969031",
					"text":""
				}
			},
			"events":[  
				{  
					"start_date":{  
						"year":"1900",
						"month":"1",
						"day":"1"
					},
					"end_date":{  
						"year":"1900",
						"month":"1",
						"day":"1"
					},
					"text":{  
						"headline":"3358254",
						"text":""
					},
					"media":{  
						"url":"<iframe id=\"iframe871\" width=\"100%\"  scrolling=\"no\" onload=\"javascript:DCP_resizeIframe();\"  frameborder=\"0\" src=\"/Acidentes/ProcessoTimeLine.aspx?EpisodioId=1\" ></iframe>",
						"credit":"",
						"caption":""
					}
				}
			]
		}; 

		var options ={  
		   width:'100%',
		   height:'1500',
		   timenav_position:'top',
		   language:'en',
		   start_at_end:false,
		   start_at_slide:0,
		   initial_zoom:0
		}; 

window.timeline = new TL.Timeline('Timeline',dataObject,options);