JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/redmond/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<link rel="stylesheet" href="https://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>
<div id="outerDiv" style="margin:5px;">
    <table id="list"></table>
</div>

CSS

.select2-dropdown { font-size: 12px; }
.select2-selection {
    font-family: "Lucida Grande", "Lucida Sans", Arial, sans-serif;
}
.select2-container--default .select2-results__option:not(.ui-state-hover) {
    /* rservate space for the border, which will be visible on hover items */
	border: 1px solid transparent;
}
.select2-container--default .select2-results__option[aria-selected=true] {
    /* we use css properties of .ui-state-highlight */
    /*background: #fbec88 url("https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/redmond/images/ui-bg_flat_55_fbec88_40x100.png") 50% 50% repeat-x;*/
    border: 1px solid #fad42e;
	background: #fbec88;
	color: #363636;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    /* we use css properties of .ui-state-hover and the color of .ui-state-active */
    border: 1px solid #79b7e7;
	background: #d0e5f5 url("https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/redmond/images/ui-bg_glass_75_d0e5f5_1x400.png") 50% 50% repeat-x;
	/*font-weight: bold;*/
	/*color: #1d5987;*/
    color: rgb(225, 112, 9);
}

JavaScript

$(function () {
    "use strict";
    var mydata = [
        { id: "10",	 FirstName: "test",	LastName: "TNT", Gender: "Male" },
         { id: "11",	 FirstName: "test2",	LastName: "ADXC", Gender: "Male" },
         { id: "12",	 FirstName: "test3",	LastName: "SDR", Gender: "Female" },
         { id: "13",	 FirstName: "test4",	LastName: "234", Gender: "Male" },
         { id: "14",	 FirstName: "test5",	LastName: "DAS", Gender: "Male" },
    ];
   $("#list").jqGrid({
	data: mydata,
       
        colNames: ['Id', 'First Name', 'Last Name', 'Gender'],
		 colModel: [
			{
                label: "Id",
                name: 'Id',
                hidden: true,
                search: false,
            },
			{
                label: "FirstName",
                name: 'FirstName',
                searchoptions: {
                    searchOperators: true,
                    sopt: ['eq', 'ne', 'lt', 'le','ni', 'ew', 'en', 'cn', 'nc'],
                }, search: true,
            },
            {
                label: "LastName",
                name: 'LastName',
                searchoptions: {
                    searchOperators: true,
                    sopt: ['eq', 'ne', 'lt', 'ni', 'ew', 'en', 'cn', 'nc'],
                }, search: true,
            },

            {
                label: "Gender",
                name: 'Gender',
                search: true, edittype: 'select', editoptions: { value: 'Male:Male;Female:Female' }, stype: 'select',

            },
			],
			onSelectRow: function (id) {
            if (id && id !== lastsel) {
                jQuery('#list').restoreRow(lastsel);
                jQuery('#list').editRow(id, true);
                lastsel = id;
            }
        },
        loadComplete: function (id) {
            if ($('#list').getGridParam('records') === 0) {
               
                //$('#grid tbody').html("<div style='padding:6px;background:#D8D8D8;'>No records found</div>");
            }
            else {
               ...