JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.jsdelivr.net/npm/[email protected]/distrib/jsxgraphcore.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/distrib/jsxgraph.css">
<div class="jsxwrap500px">
<div id='jxgbox' class='jxgbox div1x1'></div>
</div>
CSS
div.div1x1 {
height: 0;
padding-bottom: 100%;
}
div.jsxwrap500px {
max-width: 500px;
min-width: 100px;
margin: 0 auto;
overflow:hidden;
}
JavaScript
const board = JXG.JSXGraph.initBoard('jxgbox', {
boundingbox: [-5, 5, 5, -5], axis:true
});
var pol = board.create('polygon', [[-3,-3], [3,-3], [1,4]], {
fillColor: 'yellow'
});