JSFiddle - React, Tailwind, and code Playground

HTML

XMP tag:<br>
<xmp>
See how this gets on the second line (because of the eol after the container>
FooBar &lt dumbo     <fake tag="something"> Bliep </fake>
   <div>&amp; ampersand entity DOESN'T fail..<br>
      <input type="" value="" />
      <xmp> haha
          <p>this is a paragraph</p> <!-- and even a comment -->
      &lt;/xmp>  <note how all these '</ xmp>' tags still need to be escaped
                  IF THEY WOULD BE USED IN THE SNIPPET>
   </div> 
<script>
alert('hihi'); //this should not fire
</script>
       last line
</xmp>
Textarea (edit and see xmp tag get updated):
<textarea></textarea>

CSS

textarea{width:99%; height:200px;}
xmp{border:1px solid black; overflow:auto;}

JavaScript

var t=document.getElementsByTagName('textarea')[0],
    x=document.getElementsByTagName('xmp')[0];

t.value=x.innerHTML.replace(/&lt;(?=\/xmp[> \n\r\t\f\/])/gi, '<'); //dec
t.onkeyup=function(){
              x.innerHTML=t.value.replace(/<(?=\/xmp[> \n\r\t\f\/])/gi, '&lt;'); //enc
          };

//the onkeyup function fails in IE6, testing revealed that when using innerHTML on the xmp tag the characters `<bla` did not show up. Closing bla `<bla>` triggerd an 'unknown error'. It turned out that replacing the xmp with a div, and then write do `div.innerHTML="<xmp> <bla> etc. </xmp>";` worked like a charm; even with a maxed-out cpu I didn't notice any 'jumping' or 'flickering'.