JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.highcharts.com/master/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="width: 500px;height: 400px"></div>

JavaScript

$(function () {

    var chart;

    chart = new Highcharts.Chart({

        chart: {
            renderTo: 'container',
            type:'column'
        },

        title: {
            text: 'Project Progress'
        },

        subtitle: {
            text: 'All Projects'
        },

        xAxis: [{
            categories: ['Project 1', 'Project 2', 'Project 3', 'Project 4', 'Project 5', 'Project 6', 'Project 7', 'Project 8']
        },{
            categories: ['Project 1', 'Project 2', 'Project 3', 'Project 4', 'Project 5', 'Project 6', 'Project 7', 'Project 8'],
            opposite: true,
            linkedTo : 0
        }],
    

        legend: {
            enabled: false
        },
        plotOptions: {
            column: {
                //stacking: 'normal'
            }
        },
        series: [{
            groupPadding: 0.3,
            name: 'CompleteStartEndDates',
            pointWidth: 15,
            color: '#89A54E',
            data: [
            10,20,30,10,40,10
            ]
        }, {
            groupPadding: -0.1,
            name: 'ProgressStartEndDates',
            pointWidth: 7,
            color: '#123008',
            data: [
           30,40,20,30,10,10
            ]
        },{
            xAxis: 1,
            stack: 1,
            groupPadding: -0.5,
            name: 'CompleteStartEndDates',
            pointWidth: 15,
            color: 'blue',
            data: [
            20,30,10,40,10
            ]
        }, {
            xAxis: 1,
            stack: 1,
            groupPadding: 0.15,
            name: 'ProgressStartEndDates',
            pointWidth: 7,
            color: 'red',
            data: [
           40,20,30,10,10
            ]
        }]
    });
});