JSFiddle - React, Tailwind, and code Playground

by Kirubel Girma

HTML

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

<div class="book">

  <div class="page">
    <div class="complogo_topleft"></div>
    <div class="rfi_discriptor">
      <span class="rfi_num_address">RFI #0001<br>1056 - 3rd and Lenora</span>
      <div class="rfi_address1">2031 3rd Ave.<br> Seattle, WA 98121</div>
    </div>
  </div>

  <div class="page">
    <div class="complogo_topleft"></div>
    <div class="rfi_discriptor">
      <span class="rfi_num_address">RFI #0001<br>1056 - 3rd and Lenora</span>
      <div class="rfi_address1">2031 3rd Ave.<br> Seattle, WA 98121</div>
    </div>
  </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>span>img {
   background-image: url(https://i.ibb.co/zSjxCzY/printing-tool-1.png) !important;
 }

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

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

 .complogo_topleft {
   margin: 35pt 0pt 0pt 31pt;
   width: 250pt;
   height: 36.17pt;
   background: url(https://i.ibb.co/yN0XYRd/Mc-Clone-Logo.png);
   background-repeat: no-repeat;
   background-size: auto;
 }

 .rfi_num_address {
   font-size: 14pt;
   font-weight: 600;
   text-align: right;
   -ms-grid-column: 2;
   grid-column-start: 2;
   -ms-grid-column-span: 0;
   grid-column-end: 2;
   -ms-grid-row: 2;
   grid-row-start: 2;
   -ms-grid-row-span: 0;
   grid-row-end: 2;
 }

 .rfi_address1 {
   text-align: right;
   -ms-grid-column: 2;
   grid-column-start: 2;
   -ms-grid-column-span: 0;
   grid-column-end: 2;
   -ms-grid-row: 3;
   grid-row-start: 3;
   -ms-grid-row-span: 0;
   grid-row-end: 3;
 }

 .rfi_discriptor {
   width: 100%;
   height: 140pt;
   padding-right: 28pt;
   border-radius: 0pt 0pt 0pt 10pt;
   background: #0661A4;
   color: white;
 ...

JavaScript

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