JSFiddle - React, Tailwind, and code Playground

HTML

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

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

CSS

#container {
    min-width: 300px;
    max-width: 800px;
    height: 300px;
    margin: 1em auto;
}

JavaScript

$(function () {

 (function(H) {
  let defaultPlotOptions = H.getOptions().plotOptions;
  let { column: columnType } = H.seriesTypes;
  let { each } = H;

  defaultPlotOptions.xrange = H.merge(defaultPlotOptions.column, {});
  H.seriesTypes.xrange = H.extendClass(columnType, {
    type: 'xrange',
    parallelArrays: ['x', 'x2', 'y'],
    requireSorting: false,
    animate: H.seriesTypes.line.prototype.animate,

    /**
      Borrow the column series metrics, but with swapped axes. This gives free access
      to features like groupPadding, grouping, pointWidth etc.

      @public
      */
    getColumnMetrics() {
      let metrics;
      let { chart } = this;
      let swapAxes = function() {
        each(chart.series, function(s) {
          let { xAxis } = s;
          s.xAxis = s.yAxis;
          s.yAxis = xAxis;
        });
      };

      swapAxes();

      this.yAxis.closestPointRange = 1;
      metrics = columnType.prototype.getColumnMetrics.call(this);

      swapAxes();

      return metrics;
    },
    translate() {
      columnType.prototype.translate.apply(this, arguments); // jscs:ignore requireSpread
      let series = this;
      let { xAxis, columnMetrics: metrics } = series;

      H.each(series.points, function(point) {
        let barWidth = xAxis.translate(H.pick(point.x2, point.x + (point.len || 0))) - point.plotX;
        point.shapeArgs = {
          x: point.plotX,
          y: point.plotY + metrics.offset,
          width: barWidth,
          height: metrics.width
        };
        point.tooltipPos[0] += barWidth / 2;
        point.tooltipPos[1] -= metrics.width / 2;
      });
    }
  });

  // Max x2 should be considered in xAxis extremes
  H.wrap(H.Axis.prototype, 'getSeriesExtremes', function(proceed) {
    let axis = this;
    let dataMax = Number.MIN_VALUE;

    proceed.call(this);
    if (this.isXAxis) {
      each(this.series, function(series) {
        each(series.x2Data || [], function(val) {
          if (val > dataMax) {
     ...