JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<body>
<div id="xmldata"></div>
</body>
</html>

CSS

#xtb { display: table; font-family: monospace; }
#xtc { display: table-cell; }
#xmt { color: #0000CC; display: inline; }
#xel { color: #990000; display: inline; }
#xdt { color: #000000; display: inline; }
#xat { color: #FF0000; display: inline; }

JavaScript

function formatXml(xml,colorize,indent) { 
  function esc(s){return s.replace(/[-\/&<> ]/g,function(c){          // Escape special chars
	return c==' '?'&nbsp;':'&#'+c.charCodeAt(0)+';';});}			
  var sm='<div id="xmt">',se='<div id="xel">',sd='<div id="xdt">',
      sa='<div id="xat">',tb='<div id="xtb">',tc='<div id="xtc">',
	  id=indent||'  ',sz=tz='</div>',re=is='',ib,ob,at,i;
  if (!colorize) sm=se=sd=sa=sz='';	  
  xml.slice(1,-1).split(/>\s*</).forEach(function(nd){
    ob=('<'+nd+'>').match(/^(<[!?\/]?)(.*?)([?\/]?>)$/);              // Split outer brackets
    ib=ob[2].match(/^(.*?)>(.*)<\/(.*)$/)||['',ob[2],''];             // Split inner brackets 
    at=ib[1].match(/^--.*--$|=|('|").*?\1|[^\t\n\f \/>"'=]+/g)||['']; // Split attributes
    if (ob[1]=='</') is=is.substring(id.length);                      // Decrease indent
    re+=tb+tc+esc(is)+tz+tc+sm+esc(ob[1])+sz+se+esc(at[0])+sz;
    for (i=1;i<at.length;i++) re+=(at[i]=="="?sm+"="+sz+sd+esc(at[++i]):sa+' '+at[i])+sz;
    re+=ib[2]?sm+esc('>')+sz+sd+esc(ib[2])+sz+sm+esc('</')+sz+se+ib[3]+sz:'';
    re+=sm+esc(ob[3])+sz+tz+tz;
    if (ob[1]+ob[3]+ib[2]=='<>') is+=id;                              // Increase indent
  });
  return re;
}

xmlstring =
'<?xml version="1.0" encoding="UTF-8"?><b>' +
'<!---- This is a comment ------->' +
'<!DOCTYPE root SYSTEM "http://www.cs.washington.edu/research/projects/xmltk/xmldata/data/auctions/ebay.dtd">'+
'<p:PublishZZSAPSOLMANCHANGEOUT xmlns="http://www.ibm.com/maximo" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" '+
'creationDateTime="2020-12-17T11:33:08+00:00" transLanguage="DE" baseLanguage="DE" messageID="9859670.1608204788780150135" '+
'maximoVersion="7 6 20180718-1141 V7610-83" event="1">'+
'<ZZSAPSOLMANCHANGEOUTSet>'+
'<WOCHANGE action="Replace">'+
'<HELLO>text</HELLO>'+
'<B A=2><C></C></B>' +
'<ASSIGNEDOWNERGROUP>11000</ASSIGNEDOWNERGROUP>'+
'<DESCRIPTION>Erstellen und Bearbeiten eines NOC-CR im externen...