JSFiddle - React, Tailwind, and code Playground
HTML
<div class="page">
<div class="content"><button onclick="print()">Print</button> Lorem Ipsum bla bla</div>
<div class="footer">
Footer 1
</div>
</div>
<div class="page">
<div class="content" style="font-size: 2em;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed orci cursus, fermentum nibh quis, scelerisque mauris. Morbi laoreet urna lectus, vel laoreet ex vehicula quis. Integer pulvinar elit nec pharetra ultrices. Aenean viverra ullamcorper augue, nec volutpat arcu. Aenean venenatis molestie laoreet. Sed sodales, turpis eget consequat mollis, libero sem imperdiet metus, a viverra dolor erat sit amet metus. Fusce commodo fringilla ante in elementum. Sed ligula ligula, semper eget congue at, elementum eget justo. Duis lorem libero, efficitur id tincidunt eu, elementum in arcu. Aliquam quis nulla consequat, pellentesque ligula sit amet, fermentum lectus. Aenean lacinia massa vel eleifend fringilla. Phasellus rutrum risus quis nisl mattis ornare. Maecenas sem arcu, suscipit eu justo id, semper aliquet diam. Ut tellus velit, luctus nec luctus ac, mollis et tellus. Curabitur placerat tempor mauris, ut consequat dolor.
Pellentesque ac auctor arcu, sed fringilla nibh. Duis nec pretium justo. Aliquam at tellus sed enim vestibulum cursus. Nunc ac molestie risus, facilisis porttitor enim. Nulla facilisi. In auctor ligula sit amet ex viverra lacinia. Suspendisse vitae magna eu leo mattis gravida eleifend ac est. Etiam enim dolor, semper id porta nec, molestie posuere nulla. Maecenas ut leo vehicula, venenatis metus a, luctus ligula. Duis at volutpat mauris. Phasellus sed elit a nisi commodo congue nec eget nulla.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec quis tellus erat. Integer auctor mollis nisi quis venenatis. Etiam augue turpis, fermentum a odio ut, accumsan pharetra erat. Phasellus vel orci lectus. Cras interdum risus sed enim commodo sagittis. Nullam volutpat accumsan turpis, ut...
CSS
@media print {
html body {
font-size: 0;
margin: 0;
padding: 0;
}
.page {
font-size: 1rem;
display: flex;
flex-direction: column;
min-height: 100vh;
page-break-after: always;
}
.page .content {
flex: 1;
}
}