JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraph.css">
<script src="https://cdn.jsdelivr.net/npm/katex/dist/katex.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex/dist/katex.min.css">
<div id="jxgbox" class="jxgbox" style="width:600px; height:200px;">
</div>

JavaScript

JXG.Options.text.useKatex = true; // going to use Katex for all labels
            JXG.Options.text.cssDefaultStyle = 'font-family:KaTeX_Main, serif;font-size:4 vmin';
            JXG.Options.text.highlightCssDefaultStyle = 'font-family:KaTeX_Main, serif;font-size:4 vmin';

            /* 
            Création d'un board2 600 par 600 pixels utilisant MathJax
            
            A l'intérieur de ce board2 (tableau) on définit une boîte (a,b,c,d) de la forme (a,c)(a,b)(c,b)(c,d)=(-10,-20)(-10,450)(100,450)(100,-20)
            avec axes mais pas de lignes (donc pas de quadrillage) et pas de tics sur les axes
            */
            JXG.Options.text.cssDefaultStyle = 'font-family:KaTeX_Main, serif;font-size:4 vmin';
            JXG.Options.text.highlightCssDefaultStyle = 'font-family:KaTeX_Main, serif;font-size:4 vmin';

            var lim = 3;
            var left = -10;

            var board2 = JXG.JSXGraph.initBoard("jxgbox", {
                pan: { enabled: false }, boundingbox: [-lim, 0.5, lim, -.1],
                withLines: true, keepaspectratio: false, axis: true, showInfobox: false,
                defaultAxes: {
                    x: {
                        ticks: { visible: false }, withLabel: true, name: 'x', label: {
                            position: 'rt',
                            offset: [10, -20],
                            anchorX: 'right',
                            cssStyle: 'font-family:KaTeX_Math',
                            layer: 10,
                            highlight: false
                        }
                    },
                    y: {
                        ticks: { visible: false }, withLabel: true, name: '\\phi(x)', label: {
                            position: 'rt',
                            offset: [-40, -2],
                            anchorY: 'top',
                            highlight: false
                        }
                    },

                },
                showNavigation:...