JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jsxgraph.uni-bayreuth.de/~michael/jsxgui/JSXGraph/src/loadjsxgraph.js"></script>
<div id='jxgbox' class='jxgbox' style='width:400px; height:400px;margin-left:auto; margin-right:auto;'>

JavaScript

var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,5,5,-5], axis:true});
var A = brd.create('point', [-1,-1], {name:'A'});
var B = brd.create('point', [-3, -3], {name:'B'});
var C = brd.create('point', [ -2, 0], {name:'C'});
 
brd.on('move', function() {
   var list = [A, B, C], i;
 
   brd.suspendUpdate();
   for (i = 0; i < list.length; ++i) {
   if(list[i].X()<0 && list[i].Y()<0){
   	list[i].moveTo(
           [
            Math.max(-3, list[i].X()), 
            Math.max(-3, list[i].Y())
           ]
         );
   }else{
   if(list[i].Y()<-3){
   	list[i].moveTo(
           [
            Math.min(0, list[i].X()), 
            Math.max(-3, list[i].Y())
           ]
         );
   }else if(list[i].Y()>0){
   	if(list[i].X() > 0){
    	list[i].moveTo(
           [
            Math.min(0, list[i].X()), 
            Math.min(0, list[i].Y())
           ]
         );
    }else{
   	 list[i].moveTo(
           [
            Math.max(-3, list[i].X()), 
            Math.min(0, list[i].Y())
           ]
         );
    }
   	
   }else{
   if(list[i].X()<-3){
   	list[i].moveTo(
           [
            Math.max(-3, list[i].X()), 
            Math.min(0, list[i].Y())
           ]
         );
   }else if(list[i].X()>0){
   	list[i].moveTo(
           [
            Math.min(0, list[i].X()), 
            Math.max(-3, list[i].Y())
           ]
         );
   }else{
   	list[i].moveTo(
           [
            Math.min(0, list[i].X()), 
            Math.min(0, list[i].Y())
           ]
         );
   }
   
   }
   	
   }
       
   }
   brd.unsuspendUpdate();
 });