JSFiddle - React, Tailwind, and code Playground

by Pradeep Shankar

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="test">
  Testing
  <div id="section-to-print">
  
   <div class="text-primary">
  Test Tesing Testing
  </div>
    <h1 style="color:green;">Print me</h1>
    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTxGnSWBjZPbzj6IUq0IgEO1vqT4QFpcfejmHWRWDnLV862lvz-"/>
  </div>
</div>
<button onclick="printDiv()">
Print</button>

CSS

@media print {
  body * {
    visibility: hidden;
  }
  #section-to-print,
  #section-to-print * {
    visibility: visible;
  }
  #section-to-print {
    position: absolute;
    left: 0;
    top: 0;
  }
}
.printing {
  font-size:40px;
}

JavaScript

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