JSFiddle - React, Tailwind, and code Playground

HTML

<div class="xox"></div>
<div class="yoy"></div>
<div class="o_o">
	<div class="point1"></div>
	<div class="point2"></div>
	<script>
		function sorolrekha(A,B){
			/********
			This Function Takes:-
			  ____________________________
			  |	Argument	|	Type	 |
			  """"""""""""""""""""""""""""
			  |	A			|	Array(2) |
			  |	B			|	Array(2) |
			  """"""""""""""""""""""""""""
			This Function Returns:-
			  A line connecting two points "A" and "B"
			********/
			
			
			/* Algebra to calculate equation of a line:-
			
				(x-x1)/(x1-x2)=(y-y1)/(y1-y2)
				..........  after doing some math, finally we get:-  ..........
				=> y = (((x-x1)*(y1-y2))/(x1-x2))+y1;
			*/
			var x1=A[0], x2=B[0], y1=A[1], y2=B[1];
			
			//Let's draw the polar dots
			document.write("<div class='point' style='left:"+x1+"px;bottom:"+y1+"px;'></div>"); //A
			document.write("<div class='point' style='left:"+x2+"px;bottom:"+y2+"px;'></div>"); //B
			
			//Determine the larger value of "x" between "x1" and "x2"
			if (x1>x2){x_large=x1;x_small=x2;}
			else {x_large=x2;x_small=x1;}
			
			//And the larger value of "y" between "y1" and "y2"
			if (y1>y2){y_large=y1;y_small=y2;}
			else {y_large=y2;y_small=y1;}
			
			
			//And now, draw the line with "x" axis as unit
			for (i=x_small;i<=x_large;i++){
				x=i;
				y=(((x-x1)*(y1-y2))/(x1-x2))+y1;
				document.write("<div class='point' style='left:"+x+"px;bottom:"+y+"px;'></div>");
			}
			//Draw again with "y" axis as unit
			for (j=y_small;j<=y_large;j++){
				y=j;
				x=(((y-y1)*(x1-x2))/(y1-y2))+x1;
				document.write("<div class='point'...

CSS

/* Resize Margin and Paddding */
* {margin:0px;padding:0px;}

/* Let's draw the X'OX axis */
.xox {
position:absolute;
width:500px;
left:15px;
top:200px;
height:1px;
background:black;
}
.xox:before {
content:"X'";
position:relative;
top:-7px;
left:-15px;
}
.xox:after {
content:"X";
position:relative;
top:-7px;
left:490px;
}

/* And the Y'OY axis */
.yoy {
position:absolute;
width:1px;
height:500px;
background:black;
left:200px;
top:20px;
}
.yoy:before {
content:"Y";
position:relative;
top:-20px;
left:-5px;
}
.yoy:after {
content:"Y'";
position:relative;
top:500px;
left:-17px;
}

/* The O(0,0) point */
.o_o {
position:absolute;
left:200px;
top:200px;
background:white;
width:1px;
height:1px;
}

/* Default Points */
.point {
position:absolute;
background:black;
width:1px;
height:1px;
}