JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraph.css">
<script src="https://cdn.jsdelivr.net/npm/jsxgraph@v1.4.3/distrib/jsxgraphcore.js"></script>
<div id='jxgbox' class='jxgbox' style="min-width:200px; aspect-ratio: 2/1;"></div>

JavaScript

const col1 = '#4285F4', col2 = '#EA4335', col3 = '#34A853', col4 = '#FBBC05';
const colVecN = '#4285F4', colVecS = '#EA4335', colVecC = '#34A853';


const A1 = 1.5, T1 = 1.5, P1 = 0.5, Y1 = 0.5;



var board = JXG.JSXGraph.initBoard('jxgbox', {
	boundingbox: [-0.5, 3, 10, -3], axis: false, 
	zoom: {enabled: false, wheel: false},
	pan: {enabled: false, needTwoFingers: false},
    showNavigation: false
    
});

var xAxis = board.create('axis', [ [0,0],[5.4,0] ], {
	straightFirst: false, straightLast: false,
	withLabel: true, name: 't (s)', /* name: '$$x\\;\\mathrm{(m)}$$', */
    label: {position: 'rt', offset: [0, 15], anchorX: 'right', parse: false, fontSize: 12 },
	ticks: {ticksDistance: 1, 
        majorHeight: ()=>4*board.unitY, 
        minorHeight: ()=>4*board.unitY,
        tickEndings: [1,1],
		insertTicks: false, minorTicks: 1, 
		label: {anchorX: 'middle', anchorY: 'top', offset: [0,-3] } }
	});
var yAxis = board.create('axis', [ [0,-2.4],[0,2.4] ], {
	straightFirst: false, straightLast: false,
	withLabel: true, name: 'y (m)', /* name: '$$x\\;\\mathrm{(m)}$$', */
    label: {position: 'rt', offset: [12, -3], anchorX: 'left', parse: false, fontSize: 12 },
	ticks: {ticksDistance: 1, 
        majorHeight:()=>10*board.unitX,
        minorHeight: ()=>10*board.unitX,
        drawZero: true,
		insertTicks: false, minorTicks: 1, 
		label: {anchorX: 'right', anchorY: 'middle', offset: [-3,0] } }
	}); 

var sliderA = board.create('slider', [[6.5, 2.0], [8.5, 2.0], [0, 0, 1.5]], {
	name: 'ŷ', postLabel:' m', 
	withTicks: false, digits: 1, snapWidth: 0.15,
	size: 4, highline:{visible: false} });
var sliderT = board.create('slider', [[6.5, 1.5], [8.5, 1.5], [0.5, 2, 4]], {
	name: 'T', postLabel:' s',
	withTicks: false, digits: 1, snapWidth: 0.1,
	size: 4, highline:{visible: false} });
var sliderP = board.create('slider', [[6.5, 1.0], [8.5, 1.0], [0, 0, 2]], {
	name: 'φ', postLabel:' π',
	withTicks: false, digits: 1, snapWidth: 0.1,
	size: 4, highline:{visible:...