JSFiddle - React, Tailwind, and code Playground

HTML

<link href="https://visjs.github.io/vis-timeline/styles/vis-timeline-graph2d.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://visjs.github.io/vis-timeline/standalone/umd/vis-timeline-graph2d.min.js"></script>

<div id="visualization"></div>

CSS

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

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

.group-highlight {
  /* Note: !important is only necessary if you have other classes changing the same properties on the group */
  background-color: black !important;
}

/* The below class was used to test already having a class on a group */
/* .default-class {
  background-color: grey;
} */

JavaScript

var now = moment().minutes(0).seconds(0).milliseconds(0);
var groupCount = 3;
var itemCount = 20;

// create a data set with groups
var names = ["John", "Alston", "Lee", "Grant"];
var groups = new vis.DataSet();
for (var g = 0; g < groupCount; g++) {
  groups.add({ id: g, content: names[g], 
    // The below can be uncommented to test a group already having a class
    // className: 'default-class' 
  });
}

// create a dataset with items
var items = new vis.DataSet();
for (var i = 0; i < itemCount; i++) {
  var start = now.clone().add(Math.random() * 200, "hours");
  var group = Math.floor(Math.random() * groupCount);
  items.add({
    id: i,
    group: group,
    content:
      "item " +
      i +
      ' <span style="color:#97B0F8;">(' +
      names[group] +
      ")</span>",
    start: start,
    type: "box",
  });
}

// create visualization
var container = document.getElementById("visualization");
var options = {
  groupOrder: "content", // groupOrder can be a property name or a sorting function
  //multiselect: true
};

var timeline = new vis.Timeline(container);
timeline.setOptions(options);
timeline.setGroups(groups);
timeline.setItems(items);


// Define the class to be used to highlight groups
const groupHighlightClass = ' group-highlight ';

timeline.on("select", function (properties) { 
  // Define an array to store updated groups
  // This allows all groups to be updated in one go at the end improving performance
  // on large timelines
  const groupsToUpdate = [];

  // Loop selected items
  // Note: Multiple items can be selected by CTRL + Clicking if the option 'multiselect'
  // is set to true. This is set to false by default.
  properties.items.forEach(itemId => {
    // Get the group id of the item
    const groupId = items.get(itemId).group;
    
    // If group is not already in update array
    // This just prevents duplication in the update array
    if(!groupsToUpdate.some(x => x.id === groupId)){
    
      // Retrieve the groups existing...