JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>
<head>
  <title>Timeline | Nested Groups example</title>

  <style>
    body, html {
      font-family: arial, sans-serif;
      font-size: 11pt;
    }

    #visualization {
      box-sizing: border-box;
      width: 100%;
      height: 300px;
    }
  </style>

  <!-- note: moment.js must be loaded before vis-timeline-graph2d or the embedded version of moment.js is used -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

  <script type="text/javascript" src="//unpkg.com/vis-timeline@latest/dist/vis-timeline-graph2d.min.js"></script>
  <link href="//unpkg.com/vis-timeline@latest/dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="visualization"></div>

<script>
  
      // https://motocal.com/
      var groups = new vis.DataSet([
        {
          content: "Formula E",
          id: "Formula E",
          value: 1,
          className: "openwheel",
          nestedGroups: ["WRC", "MotoGP"]
        },
        { content: "WRC", id: "WRC", value: 2, className: "rally", visible: false },
        { content: "MotoGP", id: "MotoGP", value: 3, className: "motorcycle" }
      ]);

      // function to make all groups visible again
      function showAllGroups() {
        groups.forEach(function (group) {
          groups.update({ id: group.id, visible: true });
        });
      }

      var items = new vis.DataSet([
{
          start: new Date(2015, 0, 10),
          end: new Date(2015, 0, 11),
          group: "Formula E",
          className: "openwheel",
          content: "Argentina",
          id: "531@motocal.net",
        },
        {
          start: new Date(2015, 0, 22),
          end: new Date(2015, 0, 26),
          group: "WRC",
          className: "rally",
          content: "Rallye Monte-Carlo",
          id: "591@motocal.net"
        },
        {
          start: new...