JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/ag-grid/dist/ag-grid.min.noStyle.js"></script>
<link rel="stylesheet" href="https://unpkg.com/ag-grid/dist/styles/ag-grid.css">
<link rel="stylesheet" href="https://unpkg.com/ag-grid/dist/styles/ag-theme-balham.css">

<div id="myGrid" style="height: 200px;width:500px;" class="ag-theme-balham"></div>

<script type="text/javascript" charset="utf-8">
    // specify the columns
    var columnDefs = [
      {headerName: "#", field: "row", width: 30 },
      {headerName: "Make", field: "make", width: 100 },
      {headerName: "Model", field: "model", width: 100},
      {headerName: "Price", field: "price", width: 100}
    ];
    
    // specify the data
    var rowData = [
      {row: 1, make: "Toyota", model: "Celica", price: 35000},
      {row: 2, make: "Ford", model: "Mondeo", price: 32000},
      {row: 3, make: "Porsche", model: "Boxter", price: 72000},
      {row: 4, make: "Toyota", model: "Celica", price: 35000},
      {row: 5, make: "Ford", model: "Mondeo", price: 32000},
      {row: 6, make: "Porsche", model: "Boxter", price: 72000},
      {row: 7, make: "Toyota", model: "Celica", price: 35000},
      {row: 8, make: "Ford", model: "Mondeo", price: 32000},
      {row: 9, make: "Porsche", model: "Boxter", price: 72000}
    ];
    
    // let the grid know which columns and what data to use
    var gridOptions = {
      columnDefs: columnDefs,
      rowData: rowData,
      
    };

  // lookup the container we want the Grid to use
  var eGridDiv = document.querySelector('#myGrid');

  // create the grid passing in the div to use together with the columns & data we want to use
  new agGrid.Grid(eGridDiv, gridOptions);

  </script>