JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/jsxgraph@1.1.0/distrib/jsxgraphcore.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsxgraph@1.1.0/distrib/jsxgraph.css">
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
<div id="jxgbox" class="jxgbox" style="width:500px; height:500px">
</div>
<p id="init">[
  [ "grid", "", "", 0,8, 0, 8, 40 ],
  [ "force", "F", [1,4], [1,5] ],
  [ "force", "F", [1,3], [2,3], -5 ],
  ["moment","M_0",[3.1,2],[2.7,2.6],[3.5,2.6]],
  [ "forceGen", "F_1", [0.5,7.5]],
  [ "momentGen", "M_1", [2.5,7.5]]
]</p>
<p id="data"></p>
<p id="fbd_names"></p>

JavaScript

//

const divid = "jsxbox";
const stateRef = "data";


//## start of chunk 1
JXG.Options.point.snapToGrid = true; // grid snap spoils rotated static objects
JXG.Options.point.snapSizeX = 0.1;
JXG.Options.point.snapSizeY = 0.1;
JXG.Options.point.fixed = true; // this is for static objects
JXG.Options.text.useMathJax = true;
JXG.Options.label.useMathJax = true;
JXG.Options.text.useMathJax = true;
JXG.Options.label.offset = [0, 0];
JXG.Options.label.anchorY = 'middle';
var a = 0.4; //compute this to match font size (grid-independent)
var pxunit = 1/40;
var labelshift = 0.2 * a;
// Style for nodes (supports, bars)
const nodeStyle = { fillcolor: 'white', strokeColor: 'black', size: 2, strokeWidth: 1.5 }; 
const pointStyle = { fillcolor: 'black', strokeColor: 'black', size: 1, strokeWidth: 1 };
// Style for bars
const barStyle = { strokewidth: 4, strokecolor: "black" };
// Set some linestyles
const normalStyle = { strokeWidth: 2, strokeColor: 'black', lineCap: 'round' };
const thinStyle = { strokeWidth: 1, strokeColor: 'black', lineCap: 'round' };
const inactiveColor = "gray";
//## End of chunk 1



var board = JXG.JSXGraph.initBoard('jxgbox', {
  boundingbox: [-5, 7, 5, -3],
  axis: false, grid:true
});

//##start of chunk 2
var state;
var stateInput;
// make infobox optionally relative to a given point (define p.ref to [xref, yref])
board.highlightInfobox = function(x, y , el) {
    var ref = [0,0];
    var scale = [1,1];
    var dp = [1,1];
    if (typeof (el.ref) != 'undefined') {ref = el.ref}
    if (typeof (el.scale) != 'undefined') {scale = el.scale}
    if (typeof (el.dp) != 'undefined') {dp = el.dp}
    this.infobox.setText( 
        '('+((parseFloat(x)-ref[0])*scale[0]).toFixed(dp[0]) + ', ' + ((parseFloat(y)-ref[1])*scale[1]).toFixed(dp[1])+ ')')
};
//[ "circle2P", "<label1>","<label2>", [x1,y1],[x2,y2], f ]//
class circle2p {
  constructor(data){
    this.d = data.slice(0); //make a copy
    this.f = data[5];
   ...