JSFiddle - React, Tailwind, and code Playground

by WILLIAM CORREA

HTML

<div class="book">
    <div class="page">
        <div class="subpage">Page 1/2</div>    
    </div>
</div>

CSS

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

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

    .page {
      width: 297mm;
      min-height: 210mm;
      padding: 20mm;
      margin: 10mm auto;
      border: 1px #D3D3D3 solid;
      border-radius: 5px;
      background: white;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    }

    .subpage {
      padding: 1cm;
      border: 5px red solid;
      height: 170mm;
      outline: 2cm #FFEAEA solid;
    }

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

    @media print {

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

      .page {
        margin: 0;
        border: initial;
        border-radius: initial;
        width: initial;
        min-height: initial;
        box-shadow: initial;
        background: initial;
      }
    }

JavaScript

window.print();