JSFiddle - React, Tailwind, and code Playground

HTML

<div>My first sentence consists of words<span class="footnote">My first footnote.</span>. My first paragraph consists of two sentences<span class="footnote">My second footnote.</span>.
<p>We behave as footnotes should - we auto-extract the text and insert a page break as nescessary between text blocks.  <span class="red">Right-click the "result" frame and choose "Print Frame" to see the footnotes appear aligned to the bottom of each page.</span></p></div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eros ac lectus egestas malesuada a quis nulla. Praesent laoreet adipiscing elementum. Aliquam ultrices, dui placerat sollicitudin posuere, justo elit dapibus turpis, sit amet venenatis dolor metus at purus. Aenean aliquam magna eu ultricies ultricies. Maecenas sit amet interdum odio. In volutpat condimentum convallis. Suspendisse tempor nulla a pellentesque auctor.
<p>
Sed vestibulum<span class="footnote">My 3rd footnote.</span> facilisis tellus, vel convallis nisl lacinia id. Vestibulum lobortis diam vitae rutrum tincidunt. Suspendisse eros lacus, ultricies sit amet interdum at, scelerisque placerat ipsum. Nam euismod ligula auctor massa fermentum tristique. Integer volutpat iaculis auctor. Mauris quam nisi, consequat a nunc sagittis, porttitor aliquam massa. Duis eu mauris sem. Nullam porttitor enim a quam placerat vulputate et a augue. Donec varius velit eget justo semper vulputate. Morbi imperdiet elit in lacinia rhoncus.
</p><p>
Sed vestibulum<span class="footnote">My 3rd footnote.</span> facilisis tellus, vel convallis nisl lacinia id. Vestibulum lobortis diam vitae rutrum tincidunt. Suspendisse eros lacus, ultricies sit amet interdum at, scelerisque placerat ipsum. Nam euismod ligula auctor massa fermentum tristique. Integer volutpat iaculis auctor. Mauris quam nisi, consequat a nunc sagittis, porttitor aliquam massa. Duis eu mauris sem. Nullam porttitor enim a quam placerat vulputate et a augue. Donec varius velit eget justo semper...

CSS

.footnote {
    float: footnote;
    color: red;
}
.footer {
    border-top:1px solid red;
    page-break-after: always;
    float:none;
}
.footerAtDocEnd {
    border-top:1px solid red;
}
.footerEntry {
    height:15px;
    font-size:8pt;
}
.red {
    color: red;
}

JavaScript

var pageHeight = 970; // our print page height - Safari 970, Firefox 977, Chrome 970
var pageWidth = 670; // our print page width - Safari 670, Firefox 705, Chrome 670
var footnoteHeight = 15;

// First pass - identify footnotes, mark locations and replace all the footnote text
var footnoteCount = 0;
var pageFooterOffsets = [];
var pageFooterText = [];
var all = $('body').children();
all.wrapAll("<div id=\"pageWrapper\" style=\"width:"+pageWidth+"px; float:none;\" />");
$('.footnote').each(function (ind, el) {
    var f = $(el);
    var domElem = f[0];
    var offset = f.offset();
    var myPos = offset.top;
    pageFooterOffsets[footnoteCount] = myPos;
    pageFooterText[footnoteCount] = "<tr class=\"footerEntry\"><td>" + (footnoteCount+1) + "</td><td>" + domElem.innerHTML + "</td></tr>";
    f.replaceWith("<sup class=\"footnote\">" + (footnoteCount+1) + "</sup>");
    footnoteCount++;
});

// Second pass - Insert the footnotes at page boundaries
var currentPage = 0;
var currentFootnote = 0;
var lastFootnoteInPage = 0;
var availHeight = pageHeight;
var div;
var domElem;
var offset;
if (footnoteCount > 0) {
    $('#pageWrapper').children('div,p').each(function (ind, el) {
        div = $(el);
        domElem = div[0];
        offset = div.offset();
        if (currentFootnote == footnoteCount)
            return; // All finished
        if (domElem.style.position != "" && domElem.style.position != "relative") {
            return; // We ignore a fixed / absolute positioned div for determining page breaks
        }
        currentPage = Math.ceil(offset.top / pageHeight);
        var pageStartPos = (currentPage - 1) * pageHeight;
        while (lastFootnoteInPage < footnoteCount && pageFooterOffsets[lastFootnoteInPage] <= Math.min(offset.top + div.height(),pageStartPos + availHeight)) {
            availHeight -= footnoteHeight;
            lastFootnoteInPage++;
        }
        if (div.height() < pageHeight && (offset.top + div.height() > pageStartPos +...