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;"><div style="margin: 10px;"><pre>
      
         PATIENT:JOSEPH, GEORGE

                                                 MRN:    123

                                          Bone Marrow Report


ACCESSION:                M-16-0000111            Received Date/Time:       4/27/2016 13:02 CDT
                                                   Collected Date/Time:      4/27/2016 13:02 CDT


                  Bone Marrow Final Report - 4/28/2016 14:38 CDT - Auth (Verified)
Diagnosis
Peripheral Blood:
  - Moderate normocytic normochromic anemia.

Bone marrow aspirate, touch imprint and biopsy:
  - Minimal residual myeloma (1-2%plasma cells via CD138 stain).
  - Slightly hypocellular marrow with trilineage hematopoiesis.

  - See comment.
Deniz Peker MD
(The Gross/Microscopic exams or the Gross Only specimen have been reviewed
and interpreted by the undersigned pathologist)
(Electronically signed by)
Verified: 04/28/16 14:38
DP /DP


Comment
 The corresponding flow cytometry (FC-16-1437) detected a small clonal plasma cell population,
 supporting the diagnosis.

Clinical Information
53 yo female with hx of IgG kappa myeloma dx   'ed in 7/2015. She completed CyBorD and had MRD
 detected in the follow-up bone marrow biopsy. She has undergone HSCT on 1/25/2016 and this is
 Day +94 BM bx.

Laboratory ( CBC/Diff Counts) Data
CBC (4/27/16) and differential:
  WBC: 5.14 10
     Segmented neutrophils: 54%
    ...

CSS

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

JavaScript

$(document).ready(function () {            
       
            var data = [
                {name: 'Myeloma'}, {name: 'MYELOID'}, {name: 'CRCP'},
                {name: 'MYELOMA'}, {name: 'Patient'}, {name: 'COPD'},
            ];
            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: 'Concept(s)', datafield: 'name', width: 250, cellsalign: 'center'
                  }
                ]
            });
            
            var panel = $("#jqxPanel");
						//var text = panel.text();
            
            var text = panel.html();
            
            panel.jqxPanel({ width: 450, height: 300});
            
            
            
            $("#jqxgrid").on("cellclick", function (event) 
            {
                var value = event.args.value;
                
               
                var color = "#FF0000";
                
                
                
                var highlighted = text.replace(
                ' ' + value + ' ', 
                ' <span style="color:' + color + ';">' + value + '</span> '
              );
              
              panel.jqxPanel('clearcontent');
  						panel.jqxPanel('append', highlighted);
                
               
			});                       
              
       
       
           
});