JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.highcharts.com/feature/logistics-gantt/highcharts.js"></script>
<script src="https://github.highcharts.com/feature/logistics-gantt/modules/gantt.js"></script>
<script src="https://github.highcharts.com/feature/logistics-gantt/gantt/logistics.js"></script>
<script src="https://github.highcharts.com/feature/logistics-gantt/modules/stock.js"></script>

<div id="container"></div>

CSS

.clearfix {
    clear: both;
}

.info-span .utilized {
    font-size: 14px;
}

.info-span.great {
    color: #788c6b;
}

.info-span.good {
    color: #fbe496;
}

.info-span.ok {
    color: #e0b08b;
}

.info-span.bad {
    color: #c79495;
}

JavaScript

var today = +Date.now(),
    minutes = 60 * 1000,
    hours = 60 * minutes,
    days = 24 * hours,
    dateFormat = function (date) {
        var format = '%e. %b';
        return Highcharts.dateFormat(format, date);
    };

var information = {
    events: {
        loading: {
            color: '#395627',
            tooltipFormatter: function (point) {
                return [
                    '<b>Loading</b><br/>',
                    'Start: ' + dateFormat(point.start) + '<br/>',
                    'End: ' + dateFormat(point.end) + '<br/>'
                ].join('');
            }
        },
        voyage: {
            color: '#558139',
            tooltipFormatter: function (point) {
                var indicator = point.indicator;
                return [
                    '<b>Voyage</b><br/>',
                    'Start: (' + point.startLocation + ') ' + dateFormat(point.start) + '<br/>',
                    'End: (' + point.endLocation + ') ' + dateFormat(point.end) + '<br/>',
                    indicator ? 'EPR: ' + dateFormat(indicator.x) : ''
                ].join('');
            }
        },
        unloading: {
            color: '#aad091',
            tooltipFormatter: function (point) {
                return [
                    '<b>Unloading</b><br/>',
                    'Start: ' + dateFormat(point.start) + '<br/>',
                    'End: ' + dateFormat(point.end) + '<br/>'
                ].join('');
            }
        }
    },
    vessels: [{
        name: 'Vessel 1',
        utilized: 95,
        idle: 10,
        trips: [{
            name: 'Contract 1',
            start: today + days,
            voyages: [{
                duration: 21 * days,
                startLocation: 'USGLS',
                endLocation: 'BEZEE',
                loadDuration: 1 * days + 2 * hours + 45 * minutes,
                unloadDuration: 1 * days + 2 * hours + 45 * minutes
            }, {
                duration: 11 * days,
              ...