JSFiddle - React, Tailwind, and code Playground

by vniacob

HTML

<!DOCTYPE HTML>
<html>
<head>
  <title>Rise: Promise of the Guardian & Surge of Power</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.vis-range {
      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;
    }
  </style>

</head>
<body>
    <h1>Rise: Promise of the Guardian & Surge of Power</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:  3, content: 'Rise Field Hunt', value: 0},
    {id:  4, content: 'Rise Fountain', value: 0},
    {id:  5, content: 'Shops', value: 0},
    {id:  6, content: 'OTHER EVENTS', value: 0},
    {id:  7, content: 'Spell Trace Fever Time', value: 0},
    {id:  8, content: 'Burning World Event', value: 0},
    {id: 99, content: 'Sunny Sunday', value: 0},
  ]);
  
  // Create a DataSet (allows two way data-binding)
  var items = new vis.DataSet([
    {id:  001, group:  0, start: '2020-06-10T23:00:00Z', end: '2020-08-25T23:59:59Z', content: 'Rise Banquet Hall, Rise...