JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<?xml version="1.0" encoding="utf-8"?>
<Invoice>
  <CompanyCode>001</CompanyCode>
  <JournalCode>60</JournalCode>
  <EntryNumber>19600008</EntryNumber>
  <TotalAmount>320.89</TotalAmount>
  <SystemApproval>True</SystemApproval>
  <AuditTrail>&lt;!DOCTYPE html&gt;
	&lt;html lang="nl"&gt;
		&lt;head&gt;
			&lt;title&gt;
				Audittrail
			&lt;/title&gt;&lt;style&gt;
				h2 {
	border-bottom: solid 1px;
}

table {
	border-spacing: 1em 0;
	border-collapse: separate;
	margin-left: -1em;
	margin-right: -0.5em;
}

td {
	vertical-align: top;
}

td:last-child {
	word-break: break-word;
}

.audit-trail td:first-child {
	white-space: nowrap;
}

.footer {
	font-size: smaller;
	margin-top: 2em;
}

			&lt;/style&gt;
		&lt;/head&gt;&lt;body&gt;
			&lt;div&gt;
				&lt;div&gt;
					&lt;h2&gt;
						Werkstroom
					&lt;/h2&gt;&lt;table&gt;
						&lt;tr&gt;
							&lt;td&gt;Werkstroomgroep&lt;/td&gt;&lt;td&gt;Inkoopfacturen&lt;/td&gt;
						&lt;/tr&gt;&lt;tr&gt;
							&lt;td&gt;Werkstroom&lt;/td&gt;&lt;td&gt;Systeemakkoord&lt;/td&gt;
						&lt;/tr&gt;
					&lt;/table&gt;
				&lt;/div&gt;&lt;div&gt;
					&lt;h2&gt;
						Audittrail
					&lt;/h2&gt;&lt;table class="audit-trail"&gt;
						&lt;tr&gt;
							&lt;td&gt;23-10-2019 09:57&lt;/td&gt;&lt;td&gt;Admin importeerde in 'Importeren bestanden'
							&lt;/td&gt;
						&lt;/tr&gt;&lt;tr&gt;
							&lt;td&gt;23-10-2019 10:01&lt;/td&gt;&lt;td&gt;Admin controleerde en codeerde in 'Controleren en coderen'
							&lt;/td&gt;
						&lt;/tr&gt;&lt;tr&gt;
							&lt;td&gt;23-10-2019 10:01&lt;/td&gt;&lt;td&gt;Admin keurde automatisch goed
							&lt;/td&gt;
						&lt;/tr&gt;
					&lt;/table&gt;
				&lt;/div&gt;&lt;div&gt;
					&lt;h2&gt;
						Systeemakkoord grenswaardes
					&lt;/h2&gt;&lt;table&gt;
						&lt;tr&gt;
							&lt;td&gt;Systeemakkoord type&lt;/td&gt;&lt;td&gt;Validatie per regel.
							&lt;/td&gt;
						&lt;/tr&gt;&lt;tr&gt;
							&lt;td&gt;Toegestane kosten buiten de...

JavaScript

$().ready(function(){
    var str1='<?xml version="1.0" encoding="utf-8"?>
<Invoice>
  <CompanyCode>001</CompanyCode>
  <JournalCode>60</JournalCode>
  <EntryNumber>19600008</EntryNumber>
  <TotalAmount>320.89</TotalAmount>
  <SystemApproval>True</SystemApproval>
  <AuditTrail>&lt;!DOCTYPE html&gt;
	&lt;html lang="nl"&gt;
		&lt;head&gt;
			&lt;title&gt;
				Audittrail
			&lt;/title&gt;&lt;style&gt;
				h2 {
	border-bottom: solid 1px;
}

table {
	border-spacing: 1em 0;
	border-collapse: separate;
	margin-left: -1em;
	margin-right: -0.5em;
}

td {
	vertical-align: top;
}

td:last-child {
	word-break: break-word;
}

.audit-trail td:first-child {
	white-space: nowrap;
}

.footer {
	font-size: smaller;
	margin-top: 2em;
}

			&lt;/style&gt;
		&lt;/head&gt;&lt;body&gt;
			&lt;div&gt;
				&lt;div&gt;
					&lt;h2&gt;
						Werkstroom
					&lt;/h2&gt;&lt;table&gt;
						&lt;tr&gt;
							&lt;td&gt;Werkstroomgroep&lt;/td&gt;&lt;td&gt;Inkoopfacturen&lt;/td&gt;
						&lt;/tr&gt;&lt;tr&gt;
							&lt;td&gt;Werkstroom&lt;/td&gt;&lt;td&gt;Systeemakkoord&lt;/td&gt;
						&lt;/tr&gt;
					&lt;/table&gt;
				&lt;/div&gt;&lt;div&gt;
					&lt;h2&gt;
						Audittrail
					&lt;/h2&gt;&lt;table class="audit-trail"&gt;
						&lt;tr&gt;
							&lt;td&gt;23-10-2019 09:57&lt;/td&gt;&lt;td&gt;Admin importeerde in 'Importeren bestanden'
							&lt;/td&gt;
						&lt;/tr&gt;&lt;tr&gt;
							&lt;td&gt;23-10-2019 10:01&lt;/td&gt;&lt;td&gt;Admin controleerde en codeerde in 'Controleren en coderen'
							&lt;/td&gt;
						&lt;/tr&gt;&lt;tr&gt;
							&lt;td&gt;23-10-2019 10:01&lt;/td&gt;&lt;td&gt;Admin keurde automatisch goed
							&lt;/td&gt;
						&lt;/tr&gt;
					&lt;/table&gt;
				&lt;/div&gt;&lt;div&gt;
					&lt;h2&gt;
						Systeemakkoord grenswaardes
					&lt;/h2&gt;&lt;table&gt;
						&lt;tr&gt;
							&lt;td&gt;Systeemakkoord type&lt;/td&gt;&lt;td&gt;Validatie per regel.
							&lt;/td&gt;
						&lt;/tr&gt;&lt;tr&gt;
							&lt;td&gt;Toegestane kosten buiten de...