JSFiddle - React, Tailwind, and code Playground

by Gabriel Rodrigues

HTML

<page size="A4">

  <div class="header">
    [nomeEmpresa]
    <br> [endereco] - [cidade] - [cep]
    <br> [cnpj] - [telefone]
    <br>
    <h3>[nomeRelatorio] -  [tipoRelatorio]</h3>
  </div>

  <table class="table">
    <thead>
      <tr>
        <th>[coluna0]</th>
        <th>[coluna1]</th>
        <th>[coluna2]</th>
        <th>[coluna3]</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</page>

<page size="A4"></page>

CSS

body {
  background: rgb(204, 204, 204);
}

page {
  background: white;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
}

page[size="A4"] {
  width: 21cm;
  height: 29.7cm;
}

page[size="A4"][layout="portrait"] {
  width: 29.7cm;
  height: 21cm;
}

@media print {
  body,
  page {
    margin: 0;
    box-shadow: 0;
  }
}

.header {
  padding-top: 10px;
  text-align: center;
  border: 2px solid #ddd;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 80%;
}

table th {
  background-color: #4caf50;
  color: white;
  text-align: center;
}

th,
td {
  border: 1px solid #ddd;
  text-align: left;
}

tr:nth-child(even) {
  background-color: #f2f2f2
}