JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/modules/exporting.js"></script>
  <script src="https://highcharts.github.io/export-csv/export-csv.js"></script>
  <script src="https://code.highcharts.com/modules/accessibility.js"></script>
  <div id="container" role="region" aria-label="Interactive chart. Desktop screen readers from 2009 to 2015. Use up and down arrows to navigate with most screen readers." data-highcharts-chart="0">
    <div id="highcharts-information-region-0" role="region" style="left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; position: absolute;" aria-label="Chart screen reader information.">
      <div>Use regions/landmarks to skip ahead to chart and navigate between data series.</div>
      <h3>Desktop screen readers from 2009 to 2015. Click on point to visit official website</h3>
      <h4>Long description.</h4>
      <div>Most commonly used desktop screen readers from January 2009 to July 2015 as reported in the Webaim Survey. JAWS remains the most used screen reader, but is steadily declining. ZoomText and WindowEyes are both displaying large growth from 2014 to
        2015.</div>
      <h4>Structure.</h4>
      <div>Chart type: Line chart.</div>
      <div>The chart has 1 X axis displaying Time from January 2009 to July 2015.</div>
      <div>The chart has 1 Y axis displaying Percentage usage.</div>
      <h4><a tabindex="-1" href="#highcharts-data-table-0">View as data table.</a></h4></div>
    <h4 style="left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; position: absolute;">Chart graphic.</h4>
    <div tabindex="5" class="highcharts-container " id="highcharts-62q0j64-0" style="width: 800px; height: 400px; text-align: left; line-height: normal; overflow: hidden; position: relative; z-index: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
    aria-details="highcharts-information-region-0">
      <svg...