JSFiddle - React, Tailwind, and code Playground

HTML

<div id = "train"></div>
<div id = "wheel1" class = "wheel"></div>
<div id = "wheel2" class = "wheel"></div>

CSS

*
{
    margin: 0;
    padding: 0;
}

body
{
    font-family: Roboto, Consolas, Tahoma, Arial;
    overflow: hidden;
}

#train
{
    width: 450px;
    height: 200px;
    background-image: url('https://openmerchantaccount.com/img/train.png');
}

.wheel
{
    width: 75px;
    height: 75px;
    -webkit-border-radius: 75px;
    -moz-border-radius: 75px;
    border-radius: 75px;
    background-image: url('https://openmerchantaccount.com/img/wheel.png');
    position: absolute;
}

#wheel1
{
    left: 75px;
    top: 125px;
}

#wheel2
{
    left: 300px;
    top: 125px;
}

JavaScript

function Line(from, to, color, thickness)
{
    this.from = from || { x: 0, y: 0 };
    this.to = to || { x: 100, y: 100 };
    
    // Aliases for from and to
    this.p1 = this.from;
    this.p2 = this.to;
    
    this.color = color || 'black';
    this.thickness = thickness || 2;
    
    // Create hr element
    this.line = document.createElement('hr');
    
    // Cache hr element for jQuery
    this.$line = $(this.line);
    
    this.draw();
    
    return this;
}

Line.prototype.draw = function()
{
    // Distance and angle calculations for CSS3 transforms
    var 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));
    var angleRad = Math.atan2(this.p2.y - this.p1.y, this.p2.x - this.p1.x);
    var 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': this.color,
        'background-color': this.color,
        'border': 'none',
        'height': this.thickness + 'px',
        'width': d + 'px',
        'padding': 0,
        'margin': 0,
        
        
        'left': this.from.x + 'px',
        'top': this.from.y + 'px',
        
        'transform-origin': 'left',
        'transform': 'rotate(' + angleDeg + 'deg)'
    });
    
    // Append the created and styled line to body
    this.$line.appendTo('body');
}

Line.prototype.update = function(newfrom, newto, newcolor, newthickness)
{
    this.from = newfrom || this.from;
    this.to = newto || this.to;
    
    this.p1 = this.from;
    this.p2 = this.to;
    
    this.color = newcolor || this.color;
    this.thickness = newthickness || this.thickness;
    
    this.draw();
    
    return this;
}

var ww = $(window).width();
var wh = $(window).height();

var l = new Line({ x: 50, y: 150 }, { x: 400, y: 150 }, 'red', 3);

var t = 0;

var ivl = setInterval(function()
{
    var y1 =...