JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px; margin: auto; min-width: 400px; max-width: 600px"></div>

JavaScript

$(function () {
    $('#container').highcharts({

        chart: {
            type: 'boxplot'
        },

        title: {
            text: 'Highcharts box plot styling'
        },

        legend: {
            enabled: true
        },

        xAxis: {
            categories: ['1', '2', '3', '4', '5'],
            title: {
                text: 'Experiment No.'
            }
        },

        yAxis: {
            title: {
                text: 'Observations'
            }
        },

        plotOptions: {
            boxplot: {
                color: 'red',
                fillColor: 'lightblue',
                lineWidth: 1,
                medianColor: 'green',
                medianWidth: 8,
                stemColor: 'black',
                stemDashStyle: 'dot',
                stemWidth: 1,
                whiskerColor: 'black',
                whiskerLength: '20%',
                whiskerWidth: 3
            }
        },

        series: [{
            name: 'Observations',
            data: [
                [760, 801, 848, 895, 965],
                [733, 853, 939, 980, 1080],
                [714, 762, 817, 870, 918],
                [724, 802, 806, 871, 950],
                [834, 836, 864, 882, 910]
            ]
        }]

    });
});