JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://codemirror.net/lib/codemirror.js"></script>
<link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css">
<link rel="stylesheet" href="https://codemirror.net/addon/fold/foldgutter.css">
<link rel="stylesheet" href="https://codemirror.net/theme/eclipse.css">
<script src="https://codemirror.net/addon/fold/foldcode.js"></script>
<script src="https://codemirror.net/addon/fold/foldgutter.js"></script>
<script src="https://codemirror.net/addon/fold/brace-fold.js"></script>
<script src="https://cdn.rawgit.com/vkiryukhin/vkBeautify/master/vkbeautify.js"></script>

<textarea id="test"><?xml version="1.0" encoding="UTF-8"?>
<notes>
<note><to>HHHH</to><from>Jani</from><heading>Reminder</heading><body>Don't forget me this weekend!</body></note>
<note><to>Tove</to><from>Jani</from><heading>Reminder</heading><body>Don't forget me this weekend!</body></note>
<note><to>Tove</to><from>Jani</from><heading>Reminder</heading><body>Don't forget me this weekend!</body></note>
<note><to>Tove</to><from>Jani</from><heading>Reminder</heading><body>Don't forget me this weekend!</body></note>
<note><to>Tove</to><from>Jani</from><heading>Reminder</heading><body>Don't forget me this weekend!</body></note>
  
</notes>
</textarea>

CSS

/* See license.txt for terms of usage */

/*************************************************************************************************/
/* Firebug CodeMirror Theme */

.cm-s-firebug.CodeMirror {
    height: 100%;
    font-family: monospace;
    font-size: 11px;
    line-height: 1.2;
    cursor: text;
}

.cm-s-firebug .linehighlighting {
    background-color: lightgoldenrodyellow;
}


.cm-s-firebug .CodeMirror-activeline-background {
    background: #00FFFF;
}

/* Text indent from the breakpoint column */

.cm-s-firebug pre {
    padding-left: 10px;
}

/*
 * Unset the padding when the Command Editor is hidden to prevent "Unresponsive Warnings".
 * See issue 6824
 */
.cm-s-firebug.CommandEditor-hidden pre {
    padding-left: 0px;
}

.cm-s-firebug .CodeMirror-scrollbar-filler {
    background-color: white;
}

.cm-s-firebug .CodeMirror-gutters {
    border-right: 1px solid #ddd;
    background-color: rgb(238, 238, 238);
    overflow: hidden;
    position: absolute; left: 0; top: 0;
    height: 100%;
    padding-bottom: 30px;
    z-index: 3;
}

/*************************************************************************************************/
/* Color Syntax */

.cm-s-firebug .cm-keyword {color: BlueViolet; font-weight: bold;}
.cm-s-firebug .cm-atom {color: #219;}
.cm-s-firebug .cm-number {color: #164;}
.cm-s-firebug .cm-def {color: #00f;}
.cm-s-firebug .cm-variable {color: black;}
.cm-s-firebug .cm-variable-2 {color: black;}
.cm-s-firebug .cm-variable-3 {color: black;}
.cm-s-firebug .cm-property {color: black;}
.cm-s-firebug .cm-operator {color: black;}
.cm-s-firebug .cm-comment {color: Silver;}
.cm-s-firebug .cm-string {color: Red;}
.cm-s-firebug .cm-string-2 {color: Red;}
.cm-s-firebug .cm-meta {color: rgb(120, 120, 120); font-style: italic;}
.cm-s-firebug .cm-error {color: #f00;}
.cm-s-firebug .cm-qualifier {color: #555;}
.cm-s-firebug .cm-builtin {color: #30a;}
.cm-s-firebug .cm-bracket {color: #997;}
.cm-s-firebug .cm-tag {color: blue;}
.cm-s-firebug...

JavaScript

document.getElementById("test").value = vkbeautify.xml(document.getElementById("test").value);

window.editor_xml = CodeMirror.fromTextArea(document.getElementById("test"), {
    mode: 'application/xml',
    theme: 'eclipse',
    lineNumbers: true,
    lineWrapping: true,
    readOnly: true,
    extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
    foldGutter: true,
    gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
});

editor_xml.foldCode(CodeMirror.Pos(2, 0));