JSFiddle - React, Tailwind, and code Playground

HTML

<div>Print test</div>

    <div id="content">
        <div id="pageFooter"></div>
        multi-page content here...
    </div>
    
    <button onclick="print()">Print</button>

CSS

@page {
        size: landscape; float: none !important;
        @bottom-right {
            content: counter(page) " of " counter(pages);
        }

    }
    #content {
        display: table;
    }

    #pageFooter {
        display: table-footer-group;
    }

    #pageFooter:after {
        counter-increment: page;
        content: counter(page);
    }
    #pageFooter:after {
        counter-increment: page;
        content:"Page " counter(page);
        left: 0;
        top: 100%;
        white-space: nowrap;
        z-index: 20;
        -moz-border-radius: 5px;
        -moz-box-shadow: 0px 0px 4px #222;
        background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
        background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
    }

JavaScript

function print (){
window.print();
}