JSFiddle - React, Tailwind, and code Playground

HTML

<body></body>

 

<div style="position: absolute; width: 98%; height: 1px; background: #CCCCCC; top: 300px"></div>

<div style="position: absolute; width: 98%; height: 1px; background: #CCCCCC; top: 350px"></div>

<div style="position: absolute; width: 98%; height: 1px; background: #CCCCCC; top: 400px"></div>

<div style="position: absolute; width: 98%; height: 1px; background: #CCCCCC; top: 500px"></div>

<div style="position: absolute; width: 98%; height: 1px; background: #CCCCCC; top: 250px"></div>

<div style="position: absolute; width: 98%; height: 1px; background: #CCCCCC; top: 200px"></div>

<div style="position: absolute; width: 98%; height: 1px; background: #CCCCCC; top: 100px"></div>

 

<script>

 

var string = "This is the motherfucking cardioscript".toLowerCase().replace(/[^a-z]/g, "");

 

function drawPoint(x, y, z, p) {

        var point = document.createElement("DIV");

        point.style.cssText = "width: 1px; height: 1px; background-color: #000000; position: absolute; top: " + y + "px; left: " + x + "px";

        point.title = z;

        p.appendChild(point);

}

 

function drawLine(xS, yS, xE, yE, lt, p) {

        var L = Math.sqrt( (xS - xE) * (xS - xE) + (yS - yE) * (yS - yE) );

        for (var i = 0; i < L; i++) {

                var c = i / L;

                drawPoint(xS + (xE - xS) * c, yS + (yE - yS) * c, lt, p);

        }

}

 

var ABC = {

        a : [1, -1, 1, 0],

        b : [1, -1, 2, 0],

        c : [1, -1, 4, 0],

        d : [1, -2, 1, 0],

        e : [1, -2, 2, 0],

        f : [1, -2, 4, 0],

        g : [1, -4, 1, 0],

        h : [1, -4, 2, 0],

        i : [1, -4, 4, 0],

        j : [2, -1, 1, 0],

        k : [2, -1, 2, 0],

        l : [2, -1, 4, 0],

        m : [2, -2, 1, 0],

        n : [2, -2, 2, 0],

        o : [2, -2, 4, 0],

        p : [2, -4, 1, 0],

        q : [2, -4, 2, 0],

        r : [2, -4, 4, 0],

        s : [4, -1, 1, 0],

        t : [4, -1, 2, 0],

        u : [4, -1, 4, 0],

     ...