JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/handsontable@7.1.1/dist/handsontable.full.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/handsontable@7.1.1/dist/handsontable.full.min.css" rel="stylesheet" media="screen">

  </head>

  <body>
    <h1> hello world</h1>
    <script src="jquery-3.4.1.js"></script>
    <script>
      $("h1").css("color", "blue");

    </script>
    <div id="example"></div>
    <div id="example1"></div>
    <script>
      var data1 = new Array()


      var url = "https://api.myjson.com/bins/6ysob";


      fetch(url).then(function(response) {
        response.json().then(function(parsedJson) {

          data1 = parsedJson;
          var container1 = document.getElementById('example1');
          var hot = new Handsontable(container1, {
            data: data1,
            rowHeaders: true,
            colHeaders: true,
            filters: true,
            dropdownMenu: true,
            minSpareRows: 1
          });
        })
      });


      console.log('This is the parsed json', data1);

    </script>

  </body>

</html>