JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML&amp;locale=pt-br"></script>
<textarea id="MathInput" cols="60" rows="10" oninput="UpdateMath(this.value)"></textarea>
<div id="MathOutput">$${}$$</div>
<hr>
<br>
<textarea id="output" cols="60" rows="10" readonly="readonly"></textarea>

JavaScript

MathJax.Hub.Config({
    showProcessingMessages: false,
    tex2jax: {
        inlineMath: [
            ['$', '$'],
            ['\\(', '\\)']
        ]
    },
    extensions: ['toMathML.js']
});

var math = null;
MathJax.Hub.queue.Push(function () {
    math = MathJax.Hub.getAllJax('MathOutput')[0];
});
window.updateMathMl = function (math) {
   
    document.getElementById('output').value = '<?xml version="1.0"?>' + math.root.toMathML("");
};

window.UpdateMath = function (TeX) {

    MathJax.Hub.queue.Push(['Text', math, '\\displaystyle{' + TeX + '}'], [updateMathMl, math]);
    //document.getElementById('output').value = '<?xml version="1.0"?>' + math.root.toMathML("");
};