JSFiddle - React, Tailwind, and code Playground

JavaScript

function Line(from, to, color, thickness)
{
    var from = from || { x: 0, y: 0 };
    var to = to || { x: 100, y: 100 };
    
    // Aliases for from and to
    var p1 = from;
    var p2 = to;
    
    var color = color || 'black';
    var thickness = thickness || 2;
    
    // Create hr element
    var line = document.createElement('hr');
    
    // Cache hr element for jQuery
    var $line = $(line);
    
    // Distance and angle calculations for CSS3 transforms
    var d = Math.sqrt((from.x - to.x) * (from.x - to.x) + (from.y - to.y) * (from.y - to.y));
    var angleRad = Math.atan2(p2.y - p1.y, p2.x - p1.x);
    var angleDeg = Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI;    
    
    // Apply million rules of CSS
    $line.css(
    {
        'position': 'absolute',
        'color': color,
        'background-color': color,
        'border': 'none',
        'height': thickness + 'px',
        'width': d + 'px',
        'padding': 0,
        'margin': 0,
        
        
        'left': from.x + 'px',
        'top': from.y + 'px',
        
        'transform-origin': 'left',
        'transform': 'rotate(' + angleDeg + 'deg)'
    });
    
    // Append the created and styled line to body
    $line.appendTo('body');
}

// Make lines
new Line({ x: 50, y: 250 }, { x: 400, y: 25 }, 'blue', 3);
new Line({ x: 450, y: 25 }, { x: 150, y: 125 }, 'red', 3);
new Line({ x: 550, y: 540 }, { x: 15, y: 25 }, 'green', 3);