JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<button id="btnPrint">Print (this button should also be NOT be printed)!</button>
</div>
<hr />
<div id="printSection">
<div id="printThis">
This should BE printed!
</div>
<div id="printThisToo">
This should BE printed, too!
</div>
</div>
CSS
@media print {
body * {
visibility: hidden;
}
#printSection,
#printSection * {
visibility: visible;
}
#printSection {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: yellow;
}
}
JavaScript
document.getElementById("btnPrint").onclick = function() {
window.print();
}