JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://www.jqwidgets.com/public/jqwidgets/styles/jqx.arctic.css">
<script src="https://www.jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<script src="https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<BODY>
  <div id="jqxgrid"></div>
  <div id='jqxPanel' style=" font-size: 13px; font-family: Verdana;">

    CAR BUS Train Airways Chasis Lorem ipsum dolor sit āmet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, nò sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
    eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus CAR est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt Car ut labore et dolore
    magna aliquyam erat, sed diam voluptua. At vero eos et Myeloma et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor Bus sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
    molestie çonsequat, vel illum dolorere te feugait nulla facilisi. Lorem ipsum dolor sit amet Chasis
  </div>
</BODY>

CSS

body {
  width: 100%;
  height: 100%;
}

.highlighted {
  color: red;
}

JavaScript

var data = [{
  name: 'CAR'
}, {
  name: 'BUS'
}, {
  name: 'Car'
}, {
  name: 'Bus'
}, {
  name: 'Chasis'
},
 {
  name: 'Train'
},
{
  name: 'Airways'
}, ];
var source = {
  localdata: data,
  datatype: "array",
  datafields: [{
    name: 'name',
    type: 'string'
  }]
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid({
  width: 250,
  autoHeight: true,
  source: dataAdapter,
  columns: [{
    text: 'Modes of Transportation(s)',
    datafield: 'name',
    width: 250,
    cellsalign: 'center'
  }]
});

var panel = $("#jqxPanel");
var content = panel.html();

panel.jqxPanel({
  width: 450,
  height: 120
});

$("#jqxgrid").on("cellclick", function(event) {
  var value = event.args.value;
  
  // Use a regular expression to account for the beginning/end of the
  // input, arbitrary whitespace (including line feeds) as well as
  // adjacent tags
  var regExp = new RegExp('(^|>|\\s)(' + value + ')($|<|\\s)', 'g');
  
  var scrollTop;

  var highlighted = content.replace(
    regExp,
    '$1<span class="highlighted">$2</span>$3'
  );
  
  console.log("highlight value: "+highlighted);

  panel.jqxPanel('clearcontent');
  panel.jqxPanel('append', highlighted);
  
  // Get the offset of the last highlighted word relative
  // to the panel parent
  scrollTop = $('.highlighted:last', panel).position().top;
  
  console.log("Checking scrollTop Value:"+scrollTop);
  
  // Use the jqxPanel API to scroll to that word
  panel.jqxPanel('scrollTo', 0, scrollTop);
});