JSFiddle - React, Tailwind, and code Playground

HTML

<pre>This is some <span>text
with
newlines</span> in it.</pre>
<pre id='log'/>

CSS

span {
    color: red;
}

#log {
    margin-top: 1em;
    border: 1px solid grey;
}

JavaScript

var log  = document.getElementById('log');
var pre  = document.getElementsByTagName('pre')[0];
var span = document.getElementsByTagName('span')[0];
log.innerHTML += pre.innerHTML.replace(/</g,"&lt").replace(/>/g,"&gt;") + "<br>\n";
log.innerHTML += span.innerHTML.replace(/</g,"&lt").replace(/>/g,"&gt;") + "<br>\n";
log.innerHTML += pre.innerText.replace(/</g,"&lt").replace(/>/g,"&gt;") + "<br>\n";
log.innerHTML += span.innerText.replace(/</g,"&lt").replace(/>/g,"&gt;") + "<br>\n";