JSFiddle - React, Tailwind, and code Playground

by migerh

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jsxgraph/1.3.5/jsxgraphcore.js"></script>
<div id="box" style="width: 600px; height: 600px; border: 1px solid black;"></div>

JavaScript

const board = JXG.JSXGraph.initBoard('box', {boundingBox: [-10, 10, 10, -10]});

board.create('segment', [[-2, -4], [-2,  6]], {color: 'red', strokeWidth: 20});
board.create('segment', [[-2, -4], [-4, -4]], {color: 'red', strokeWidth: 20});

board.create('segment', [[ 2, -4], [ 2,  6]], {color: 'grey', strokeWidth: 20, lineCap: 'round'});
board.create('segment', [[ 2, -4], [ 4, -4]], {color: 'grey', strokeWidth: 20, lineCap: 'round'});

board.create('segment', [[-4, 8], [ 4, 8]], {strokeWidth: 20, lineCap: 'square'});
board.create('segment', [[-4, 8], [-4, 0]], {strokeWidth: 20, lineCap: 'square'});