JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.google.com/jsapi?.js"></script>
<div id='example5.4'></div>

JavaScript

function drawChart() {
  var container = document.getElementById('example5.4');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({ type: 'string', id: 'Role' });
  dataTable.addColumn({ type: 'string', id: 'Name' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });
  dataTable.addRows([
    [ 'red/green/blue', 'NAME OF BAR (should be RED) (ff0000)', new Date(1789, 3, 29), new Date(1797, 2, 3) ],
    [ 'red/green/blue', 'NAME OF BAR (should be GREEN) (00ff00)', new Date(1796, 2, 3),  new Date(1801, 2, 3) ],
    [ 'red/green/blue', 'NAME OF BAR (should be BLUE) (0000ff)',  new Date(1801, 2, 3),  new Date(1809, 2, 3) ]]);

  var options = {
    colors: ['#ff0000', '#00ff00', '#0000ff'],
  };

  chart.draw(dataTable, options);
}
google.load('visualization', '1', {packages:['timeline'], callback: drawChart});