JSFiddle - React, Tailwind, and code Playground

by Kirubel Girma

HTML

<div class='print-button' id="prnt_btn01">
  <div><img src="" class="prnt">Print This page(s)</div>
</div>

<div class="book">

  <div class="page">
  </div>

  <div class="page">
  </div>

</div>

CSS

body {
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
   background-color: #f3f3f3;
   font: 12pt "Tahoma";
   overflow: scroll;
 }

 * {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
 }

 .print-button {
   display: table;
   align-items: center;
   border: 1px solid #2196F3;
   border-radius: 5px;
   cursor: pointer;
   position: absolute;
   height: 2em;
   width: 12em;
   margin: 0 auto;
   top: .2em;
   left: 0em;
   right: 0em;
   bottom: 0em;
 }

 img.prnt {
   width: 1.2em;
   height: 1.2em;
   margin-right: .6em;
   vertical-align: middle;
   background-image: url(https://i.ibb.co/G0F5BnQ/printing-tool.png);
   background-size: cover;
   background-repeat: no-repeat;
 }

 .print-button:hover>div>img {
   background-image: url(https://i.ibb.co/zSjxCzY/printing-tool-1.png) !important;
 }

 .print-button:hover>div {
   background: #2196F3;
   color: white !important;
 }

 .print-button>div {
   font-size: .9em;
   display: table-cell;
   vertical-align: middle;
   text-align: center;
   width: 6em;
   height: 1em;
   color: #2196F3;
 }

 .page {
   display: grid;
   overflow: hidden;
   grid-template-columns: 105mm 105mm;
   grid-template-rows: 140pt 1060pt;
   width: 210mm;
   min-height: 297mm;
   background: white;
   padding: 0px;
   margin: 10mm auto;
   border: 1px #D3D3D3 solid;
   border-radius: 5px;
   -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
 }

 @page {
   size: A4;
   margin: 0;
 }

 @media print {

   html,
   body {
     width: 210mm;
     height: 297mm;
   }

   * {
     -webkit-print-color-adjust: exact;
   }

   .page {
     display: grid;
     overflow: hidden;
     grid-template-columns: 105mm 105mm;
     grid-template-rows: 45.9375mm 347.8125pt;
     margin: 0;
     border: initial;
     border-radius: initial;
     padding: initial;
     width: initial;
     min-height: initial;
     -webkit-box-shadow: initial;
    ...

JavaScript

function print() {
  window.print()
}
document.getElementById("prnt_btn01").addEventListener("click", print)