JSFiddle - React, Tailwind, and code Playground

by Rapha Souza

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<html >
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.4.1/paper.css">
    <style>
        @page { size: A4 }
        .sheet {
            padding: 20mm;
            background-color: #fafafa;
        }
        body {
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            font-family: 'Georgia', serif;
        }
        h1, p {
            margin: 0 0 10px;
        }
    </style>
</head>
<button class="btn" id="btnPrint" onclick="imprimir()">Imprimir</button>
<body class="A4">

    <section class="sheet">
        <h1>Paper.css Document</h1>
        <p>This document utilizes Paper.css to format the page to A4 size, providing
          a clean and printable layout.</p>
        <p>Content can be styled and structured as needed within this framework.</p>
    </section>
</body>
</html>

JavaScript

function imprimir() {
  window.print()
}