JSFiddle - React, Tailwind, and code Playground

HTML

<button  onclick="window.location='printerplus://send?text='+document.getElementById('report').innerHTML;">
Send to Printer+
</button>
<xmp id="report" style="">
<h1>Printer+ HTML interpreter</h1> 
<p>These tags can be parameterized to add other styles.</p>
<br> 
<h1>HTML with parameters</h1> 
<text size="1" align="0" bold="0" under="0" reversed="0">It'a text with all parameters!.</text> 
<text size="2">Text can be enlarged from 1 to 8</text> 
<br> 
<h2 align="1">Image</h2> 
<img align="1" src="https://www.rcti.es/source/logo.png" > 
<br> 
<h2 align="1">Qr</h2> 
<qr align="1" >https://www.rcti.es/source/logo.png</qr> 
<br> 
<h2 align="1">Barcode</h2> 
<p>Barcode without HRI (Human Readable Interpretation)</p> 
<barcode align="1" height="90" hri="0" >01234ABC</barcode> 
<br> 
<p>Barcode with HRI value set on top</p> 
<barcode align="1" height="90" hri="1" >01234ABC</barcode> 
<br> 
<p>Barcode with HRI value set on bottom</p> 
<barcode align="1" height="90" hri="2" >01234ABC</barcode> 
<br> 
<p>Barcode with HRI value set to both (top and bottom)</p> 
<barcode align="1" height="90" hri="3" >01234ABC</barcode> 
<br> 
<p align="0" under="0" reversed="0">It's a tag p on left.</p> 
<p align="1" under="1" reversed="0">It's a tag p on center.</p> 
<p align="2" under="0" reversed="0">It's a tag p on right.</p> 
<p reversed="1">It's a tag p reversed</p> 
<p under="1">It's a tag p underlined</p> 
<b >It's a b</b> 
<h1 align="0" under="0" reversed="0">It's a h1</h1> 
<h2 >It's a h2</h2> 
<h3 >It's a h3</h3> 
<h4 >It's a h4</h4> 
<h5 >It's a h5</h5> 
<h6 >It's a h6</h6> 
<h7 >It's a h7</h7> 
<br> 
<p>Text with space     hi</p>
</xmp>