JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://www.highcharts.com/js/highcharts.js"></script>
<div id="container" style="height: 400x"></div>

CSS

.highcharts-axis {
   float:left;
   width:100%;
   left:33%!important;
   display:block;
   position:absolute;
}

JavaScript

// Define tasks
var tasks = [
    
    {
    name: 'Sleep',
    intervals: [
        { // From-To pairs
        from: Date.UTC(2010, 0, 1),
        to: Date.UTC(2010, 1, 30)},
    
        {
        from: Date.UTC(2010, 1, 1),
        to: Date.UTC(2010, 2,20)}]
    },
    
    {
    name: 'Family time',
    intervals: [
        { // From-To pairs
        from: Date.UTC(2010, 2, 25),
        to: Date.UTC(2010, 3, 30)},
        {
        from: Date.UTC(2010, 4, 2),
        to: Date.UTC(2010, 4, 22)}]

    }
   ];

// Define milestones
var milestones = [{
    name: 'Get to bed',
    time: Date.UTC(2010, 2,22),
    task: 1,
    marker: {
        symbol: 'circle',
        lineWidth: 1,
        lineColor: 'black',
        radius: 8
    }}];

// re-structure the tasks into line seriesvar series = [];
var series = [];
$.each(tasks.reverse(), function(i, task) {
    var item = {
        name: task.name,
        data: []
    };
    $.each(task.intervals, function(j, interval) {
        item.data.push({
            x: interval.from,
            y: i,
            label: interval.label,
            from: interval.from,
            to: interval.to
        }, {
            x: interval.to,
            y: i,
            from: interval.from,
            to: interval.to
        });

        // add a null value between intervals
        if (task.intervals[j + 1]) {
            item.data.push([(interval.to + task.intervals[j + 1].from) / 2, null]);
        }

    });

    series.push(item);
});

// restructure the milestones
$.each(milestones, function(i, milestone) {
    var item = Highcharts.extend(milestone, {
        data: [[
            milestone.time,
            milestone.task
            ]],
        type: 'scatter'
    });
    series.push(item);
});


// create the chart
var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container'
    },

    title: {
        text: 'Daily activities'
    },

     xAxis: [{ // master axis
            type: 'datetime',
       ...