JSFiddle - React, Tailwind, and code Playground
by vniacob
HTML
<!DOCTYPE HTML>
<html>
<head>
<title>SENGOKU RETURNS: THE ASURA CRISIS</title>
<script src="https://visjs.github.io/vis-timeline/standalone/umd/vis-timeline-graph2d.min.js"></script>
<link href="https://visjs.github.io/vis-timeline/styles/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,400i,600,600i,700" rel="stylesheet">
<style type="text/css">
body, html {
font-family: 'Titillium Web';
background-color: #ECEDE7;
}
ul {
padding-left: 1em;
padding-top: 0px;
margin-block-start: 0px;
margin-block-end: 0px;
}
.vis-timeline {
border: .3em solid #D4D4CD;
background-color: #F9F9F8;
}
.vis-item {
border-color: #D4D4CD;
border-radius: 10px!important;
background-color: #ECEDE7;
line-height: 1em;
margin: 0px;
}
.vis-inner {
font-weight: bold;
}
.vis-sunday {
background: #ffaaaa;
}
.vis-major {
height: 2.5em;
border-radius: 10px!important;
}
</style>
</head>
<body>
<h1>SENGOKU RETURNS: THE ASURA CRISIS</h1>
<div id="visualization"></div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
var groups = new vis.DataSet([
{id: 0, content: '', value: 0},
{id: 6, content: 'OTHER EVENTS', value: 0},
{id: 97, content: 'Cash Inventory Transfer Event', value: 0},
{id: 98, content: 'Spell Trace Fever Time', value: 0},
{id: 99, content: 'Sunny Sunday', value: 0},
]);
var p0826b = '2020-08-26T22:00:00Z';
var p1007b = '2020-10-07T22:00:00Z';
var p1014b = '2020-10-14T00:00:00Z';
var p1021b = '2020-10-21T00:00:00Z';
var p1104b = '2020-11-04T00:00:00Z';
var p1110e = '2020-11-10T23:59:59Z';
var p1103e = '2020-11-03T23:59:59Z';
var p1117e = '2020-11-17T23:59:59Z';
// Create a DataSet...