JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/xrange.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
</figure>

CSS

.series_0 g path{
  fill: #FF0000 !important;
}

.highcharts-series-0 rect{
  fill: #FF0000 !important;
}

.series_1 g path{
  fill: #00FF00 !important;
}

.highcharts-series-1 rect{
  fill: #00FF00 !important;
}

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'xrange',
        pointPlacement: 'on'
    },
    title: {
        text: 'Highcharts X-range'
    },
  	plotOptions: {
      series: {
        pointPlacement: 'on'
      }
    },
    xAxis: {
        type: 'datetime',
        min: Date.UTC(2014, 10, 21, 0, 0),
        max: Date.UTC(2014, 10, 21, 24, 0),
        gridLineWidth: 1,
        labels: {
            format: '{value:%H}',
            tickInterval: 3600 * 1000
        }
    },
    yAxis: {
          gridLineWidth: 1,
      	min: 0,
        title: {
            enabled:false
        }
    },
    series: [{
        name: 'Project 1',
        className: "series_0",
        pointPadding: 0,
        pointWidth: 5,
        groupPadding: 0,
        data: [
            {
            x: Date.UTC(2014, 10, 21, 4, 15),
            x2: Date.UTC(2014, 10, 21, 19, 15),
            y: 1
        },{
            x: Date.UTC(2014, 10, 21, 4, 15),
            x2: Date.UTC(2014, 10, 21, 19, 15),
            y: 2
        }, 
        ],
        dataLabels: {
            enabled: true
        }
    },
    {
        name: 'Project 2',
        className: "series_1",
        pointPadding: 0,
        pointWidth: 5,
        groupPadding: 0,
        data: [
            {
            x: Date.UTC(2014, 10, 21, 4, 15),
            x2: Date.UTC(2014, 10, 21, 19, 15),
            y: 3
        },{
            x: Date.UTC(2014, 10, 21, 4, 15),
            x2: Date.UTC(2014, 10, 21, 19, 15),
            y: 4
        }, 
        ],
        dataLabels: {
            enabled: true
        }
    }
    ]
});