JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid"></div>
    </div>

JavaScript

$(document).ready(function () {

		var source =
		{
			datatype: "json",
			datafields: [
				{ name: 'ID', type: 'string'},
				{ name: 'firstname', type: 'string'},
				{ name: 'lastname', type: 'string'},
				{ name: 'title', type: 'string'},
				{ name: 'city', type: 'string' },
				{ name: 'country', type: 'string' },
				{ name: 'title', type: 'string' },
				{ name: 'address', type: 'string' },
				{ name: 'postalcode', type: 'string' },
				{ name: 'homephone', type: 'string' },
				{ name: 'hiredate', type: 'string' },
				{ name: 'notes', type: 'string' },
			],
			cache: false,
			url: './data.asp',
			filter: function()
			{
				// update the grid and send a request to the server.
				$("#jqxgrid").jqxGrid('updatebounddata', 'filter');
			},
			sort: function()
			{
				// update the grid and send a request to the server.
				$("#jqxgrid").jqxGrid('updatebounddata', 'sort');
			},
			root: 'Rows',
			beforeprocessing: function(data)
			{		
				if (data != null)
				{
					// Get the total number of records			
					source.totalrecords = data[0].TotalRows;
					
				}
			}
     };

					var initrowdetails = function (index, parentElement, gridElement, datarecord) {
                var tabsdiv = null;
                var information = null;
                var notes = null;
                tabsdiv = $($(parentElement).children()[0]);
                if (tabsdiv != null) {
                    information = tabsdiv.find('.information');
                    notes = tabsdiv.find('.notes');
                    var title = tabsdiv.find('.title');
                    title.text(datarecord.firstname);

                    var container = $('<div style="margin: 5px;"></div>')
                    container.appendTo($(information));
                    var leftcolumn = $('<div style="float: left; width: 45%;"></div>');
                    var rightcolumn = $('<div style="float: left; width: 40%;"></div>');
                    container.append(leftcolumn);
         ...