JSFiddle - React, Tailwind, and code Playground

HTML

<script type='x/template' id='gbcr-test'>
    < div class = "content"
    style = "-webkit-transform: scale(0.041667);" > < div id = "page86-div"
    style = "position:relative;width:9837pt;height:15408pt; background-color:white;"
    pagelabel = "75" > < img style = "position:absolute;left:1089pt;top:9212pt;width:202pt;height:108pt"
    src = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/wAALCAAGAAsBAREA/8QAFQABAQAAAAAAAAAAAAAAAAAAAQf/xAAgEAAABQMFAAAAAAAAAAAAAAAAAQIDBQQR0hUhVoSV/9oACAEBAAA/ALDp8/yBnz05hKgnrbzzJ9BOY//Z" > < p style = "position:absolute;top:875.536pt;left:4523.184pt;width:2431.969pt;height:235.310pt" > < span class = "ft00"
    hscale = "1.000"
    style = "position:absolute;top:-1.478pt;left:0.000pt;letter-spacing:0.108pt;"
    bbox = "4523:875:4758:1110" > < img style = "height:184pt;width:0pt;"
    src = "blank.png" > 6.1 < /span><span class="ft01" hscale="1.000" style="position:absolute;top:7.522pt;left:302.400pt;letter-spacing:29.146pt;" bbox="4825:882:5297:1108"><img style="height:176pt;width:0pt;" src="blank.png">THE </span > < span class = "ft01"
    hscale = "1.000"
    style = "position:absolute;top:7.522pt;left:738.536pt;letter-spacing:29.146pt;"
    bbox = "5261:882:6503:1108" > < img style = "height:176pt;width:0pt;"
    src = "blank.png" > PROTOTYPE < /span><span class="ft01" hscale="1.000" style="position:absolute;top:7.522pt;left:1943.737pt;letter-spacing:29.146pt;" bbox="6466:882:6955:1108"><img style="height:176pt;width:0pt;" src="blank.png">TEST</span > < /p>
        <p style="position:absolute;top:838.932pt;left:6948.888pt;width:1566.391pt;height:282.172pt"><span class="ft02" hscale="1.000" style="position:absolute;top:-0.873pt;left:0.000pt;" bbox="6948:838:7052:1121"><img style="height:220pt;width:0pt;" src="blank.png">: </span > < span class = "ft01"
    hscale = "1.000"
    style =...

CSS

div {
        padding: 0;
        margin: 0;
        border: none;
        line-height: 1;
    }
    span {
        padding: 0;
        margin: 0;
        border: none;
        height: 1px;
        line-height: 1;
    }

JavaScript

function getRect(el) {
    var nodes = el.querySelectorAll('span'),
        start = nodes[0],
        end = nodes[1],
        range = document.createRange();

    range.setStart(start, 0);
    range.setEnd(end, 0);
    return range.getBoundingClientRect();
}

function generateElement(){
    var text = document.getElementById('gbrc-test').innerHTML,
        div = document.createElement('div');
    
    div.style.position = 'absolute';
    div.style.webkitTransform = 'scale(0.041667)';
    div.style.MozTransform = 'scale(0.041667)';
    div.style.msTransform = 'scale(0.041667)';
    div.style.transtorm = 'scale(0.041667)';
    
    document.body.appendChild(div);
}

generateElement();
getRect(document.querySelector('.content'));