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">
<div id="jxgbox" class="jxgbox" style="width:500px; height:500px">
</div>

JavaScript

const board = JXG.JSXGraph.initBoard('jxgbox', { 
    boundingbox: [-5, 5, 5, -5], axis:true
});
board.create("arrow", [[1,1],[1,2]],{lastArrow:{size:4}});
board.create("arrow", [[1.5,1],[1.5,2]],{lastArrow:{type:2}});
board.create("arrow", [[2,1],[2,2]],{lastArrow:{type:3}});
board.create("arrow", [[2.5,1],[2.5,2]],{lastArrow:{type:4}});
board.create("arrow", [[3,1],[3,2]],{lastArrow:{type:5}});
board.create("arrow", [[3.5,1],[3.5,2]],{lastArrow:{type:6}});