JSFiddle - React, Tailwind, and code Playground

JavaScript

;(function()
{
    'use strict';
    
    function Line(from, to, color, thickness)
    {
        if(!from || !to)
            return;
        
        var self = this;
        
        this.from = from;
        this.to = to;
        
        // Aliases for from and to
        this.p1 = this.from;
        this.p2 = this.to;
        
        this.color = color || 'black';
        this.thickness = thickness || 2;
        
        // Create hr element
        var line = document.createElement('hr');
        
        // Cache hr element for jQuery
        this.$line = $(line);
        
        // Distance and angle calculations for CSS3 transforms
        this.d = Math.sqrt((this.from.x - this.to.x) * (this.from.x - this.to.x) + (this.from.y - this.to.y) * (this.from.y - this.to.y));
        this.angleRad = Math.atan2(this.p2.y - this.p1.y, this.p2.x - this.p1.x);
        this.angleDeg = Math.atan2(this.p2.y - this.p1.y, this.p2.x - this.p1.x) * 180 / Math.PI;    
        
        // Apply million rules of CSS
        this.$line.css(
        {
            'position': 'absolute',
            'color': self.color,
            'background-color': self.color,
            'border': 'none',
            'height': self.thickness + 'px',
            'width': self.d + 'px',
            'padding': 0,
            'margin': 0,
            'left': self.from.x + 'px',
            'top': self.from.y + 'px',
            
            'transform-origin': 'left',
            'transform': 'rotate(' + self.angleDeg + 'deg)'
        });
        
        // Append the created and styled line to body
        this.$line.appendTo('body');
    }
    
    let lines = [];
    
    // Make lines
    lines.push(new Line({ x: 50, y: 250 }, { x: 400, y: 25 }, 'blue', 3));
    lines.push(new Line({ x: 450, y: 25 }, { x: 150, y: 125 }, 'red', 3));
    lines.push(new Line({ x: 550, y: 540 }, { x: 15, y: 25 }, 'green', 3));
})();