JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.google.com/jsapi?.js"></script>
<div id="timeline" style="width: 900px; height: 580px;"></div>

JavaScript

function drawChart() {
    // Set Data Source
    var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1TzZNxvzOaLIayLhpdyZqzX0sJslJRnCnygugWj_-400/edit#gid=0');
    // Set Query for Data Source
    query.setQuery('SELECT A1:A,D1:J4');
    // Send the query with callback function
    query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
    // Handle Query errors
    if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
    }
    // Draw Chart
    var data = response.getDataTable();

    var view = new google.visualization.DataView(data);

    for (var col = 1; col < data.getNumberOfColumns() - 1; col++) {
        for (var row = 1; row < data.getNumberOfRows(); row++) {

            view.setColumns([0, {
                type: 'date',
                label: "Start",
                calc: function (dt, row) {
                    var date = dt.getValue(0, column);
                    if (date == '' || date == null) {
                        return null;
                    } else {
                        return date;
                    }
                }
            }, {
                type: 'date',
                label: "End",
                calc: function (dt, row) {
                    var date = dt.getValue(0, column + 1);
                    if (date == '' || date == null) {
                        return null;
                    } else {
                        return date;
                    }
                }
            }]);
        }
    }

    var container = document.getElementById('timeline');
    var chart = new google.visualization.Timeline(container);
    chart.draw(view);
}
google.load('visualization', '1', {
    packages: ['timeline'],
    callback: drawChart
});