JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/responsive/1.0.1/js/dataTables.responsive.min.js"></script>
<table id="example" class="display nowrap" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th></th>
            <th>Item 1</th>
            <th>Item 2</th>
            <th>Item 3</th>
            <th>Item 4</th>
        </tr>
    </thead>
    <tbody>
        <tr data-child-value='<intro change="change" id="c1031s14" pf-type="na" target="official"> <para>This chapter provides guidance on the identification and performance of procedures for evaluating the biocompatibility of drug containers, elastomeric closures, medical devices, and implants. Biocompatibility refers to the tendency of these products to remain biologically inert throughout the duration of their contact with the body. The biocompatibility testing procedures referenced in this chapter are designed to detect the nonspecific, biologically reactive, physical or chemical characteristics of medical products or the materials used in their construction. In combination with chemical assays, these biological procedures can be used to detect and identify the inherent or acquired toxicity of medical products prior to or during their manufacturing and processing.</para> <para>Preclinical testing procedures to evaluate the safety of the elastomers, plastics, or other polymers used in the construction of medical products are referenced or described in the following general chapters:<revision cn="1-May-2016" official="yes" pf-type="na" symbols="all"> <add> <xref rid="c1" type="general-chapter">Injections and Implanted Drug Products<chap-num>1</chap-num> </xref> </add> </revision>,<xref rid="c87" type="general-chapter">Biological Reactivity Tests, In Vitro<chap-num>87</chap-num> </xref>,<xref rid="c88" type="general-chapter">Biological Reactivity Tests, In...

CSS

@import url('//cdn.datatables.net/1.10.2/css/jquery.dataTables.css');
 td.details-control {
    background: url('http://www.datatables.net/examples/resources/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('http://www.datatables.net/examples/resources/details_close.png') no-repeat center center;
}

JavaScript

/*! https://mths.be/he v0.5.0 by @mathias | MIT license */
;(function(root) {

	// Detect free variables `exports`.
	var freeExports = typeof exports == 'object' && exports;

	// Detect free variable `module`.
	var freeModule = typeof module == 'object' && module &&
		module.exports == freeExports && module;

	// Detect free variable `global`, from Node.js or Browserified code,
	// and use it as `root`.
	var freeGlobal = typeof global == 'object' && global;
	if (freeGlobal.global === freeGlobal || freeGlobal.window === freeGlobal) {
		root = freeGlobal;
	}

	/*--------------------------------------------------------------------------*/

	// All astral symbols.
	var regexAstralSymbols = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
	// All ASCII symbols (not just printable ASCII) except those listed in the
	// first column of the overrides table.
	// https://html.spec.whatwg.org/multipage/syntax.html#table-charref-overrides
	var regexAsciiWhitelist = /[\x01-\x7F]/g;
	// All BMP symbols that are not ASCII newlines, printable ASCII symbols, or
	// code points listed in the first column of the overrides table on
	// https://html.spec.whatwg.org/multipage/syntax.html#table-charref-overrides.
	var regexBmpWhitelist = /[\x01-\t\x0B\f\x0E-\x1F\x7F\x81\x8D\x8F\x90\x9D\xA0-\uFFFF]/g;

	var regexEncodeNonAscii =...