JSFiddle - React, Tailwind, and code Playground

by Jimmy Chandra

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>

JavaScript

var 
  pad = function(n, width, z) {
            z = z || '0';
            n = n + '';
            return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
        },
  data = [
    { "x1": 543, "y1": -24, "x2": 550, "y2": -13, "font": "Helvetica", "fontsize": 7, "data": " 716" },
    { "x1": 543, "y1": -38, "x2": 550, "y2": -26, "font": "Helvetica", "fontsize": 7, "data": " 908" },
    { "x1": 543, "y1": -52, "x2": 550, "y2": -40, "font": "Helvetica", "fontsize": 7, "data": " 000" },
    { "x1": 543, "y1": -61, "x2": 550, "y2": -53, "font": "Helvetica", "fontsize": 7, "data": "  34" },
    { "x1": 543, "y1": -83, "x2": 550, "y2": -63, "font": "Helvetica", "fontsize": 7, "data": "A.B.N." },
    { "x1": 540, "y1": 116, "x2": 547, "y2": 157, "font": "Helvetica", "fontsize": 7, "data": "DOCUMENT" },
    { "x1": 434, "y1": 117, "x2": 441, "y2": 157, "font": "Helvetica", "fontsize": 7, "data": "CUSTOMER" },
    { "x1": 457, "y1": 117, "x2": 464, "y2": 131, "font": "Helvetica", "fontsize": 7, "data": "TAX" },
    { "x1": 503, "y1": 117, "x2": 510, "y2": 158, "font": "Helvetica", "fontsize": 7, "data": "DOCUMENT" },
    { "x1": 516, "y1": 117, "x2": 523, "y2": 142, "font": "Helvetica", "fontsize": 7, "data": "PHONE" },
    { "x1": 528, "y1": 117, "x2": 535, "y2": 146, "font": "Helvetica", "fontsize": 7, "data": "SERVED" },
    { "x1": 421, "y1": 118, "x2": 428, "y2": 133, "font": "Helvetica", "fontsize": 7, "data": "OUR" },
    { "x1": 445, "y1": 118, "x2": 452, "y2": 142, "font": "Helvetica", "fontsize": 7, "data": "TERMS" },
    { "x1": 468, "y1": 118, "x2": 475, "y2": 158, "font": "Helvetica", "fontsize": 7, "data": "CUSTOMER" },
    { "x1": 480, "y1": 118, "x2": 487, "y2": 136, "font": "Helvetica", "fontsize": 7, "data": "DATE" },
    { "x1": 492, "y1": 118, "x2": 499, "y2": 137, "font": "Helvetica", "fontsize": 7, "data": "PAGE" },
    { "x1": 542, "y1": -122, "x2": 556, "y2": -91, "font": "Helvetica", "fontsize": 14, "data": "LTD." },
    {...