JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>


</head>
<body class="a4_landscape">
<table id="maintable">
  <thead><tr><td>
<div class="header">
  <div><img src="img/logo1.png"></div>
	<div>
	<div class="size_16">XXX</div>
<div class="size_11">XXXX</div>
<div class="size_16">XXXX</div>
<div id="page_number"><span></span></div>

</div>
 </div>
 <hr>   
 
  </td></tr></thead>
  <tbody><tr><td>
    <div class="content">
	<div class="middle">
<div class="middle_first">
<div>
<div><span class="text_bold">XXXX:</span>	XXXX</div>
<div><span class="text_bold">XXXX:</span>	XXXX</div>
<div><span class="text_bold">XXXX:</span></div>

</div>
<div>
<div><span class="text_bold">XXXX:</span>	XXXX</div>
<div><span class="text_bold">XXXX:</span>	XXXX</div>
<div><span class="text_bold">XXXX:</span></div>
</div>
</div>
<div class="placeholöder"></div>

<div class="middle_first">
<div>
<div><span class="text_bold">XXXX:</span></div>
<div>XXXX</div>
<div>XXXX</div>
<div>XXXX</div>
<div>XXXX</div>
<div>XXXX</div>
<div>XXXX</div>
<div>XXXX</div>
</div>

<div>
<div><span class="text_bold">XXXX:</span></div>
<div>XXXX</div>
<div>XXXX</div>
<div>XXXX</div>
<div>XXXX</div>
<div>XXXX</div>
<div>XXXX</div>
<div>XXXX</div>

</div>



</div>
	</div>
	</div>
  </td></tr>
  
  <tr><td>
    <div class="placeholöder"></div>
	<div class="middle_center">
  XXXX
  </div>
  <table id="table_packagedata"><tbody>
<tr>
<td>XXXX</td>
<td>XXXX</td>
</tr>
<tr>
<td>XXXX</td>
<td>XXXX</td>
</tr>
<tr>
<td>XXXX</td>
<td>XXXX</td>
</tr>
<tr>
<td>XXXX</td>
<td>XXXX</td>
</tr>
<tr>
<td>XXXX</td>
<td>XXXX</td>
</tr>
  </tbody></table>
  </td></tr>
  <tr><td>
  
<table id="table_goodsdata"><thead>
<tr>
	<td>XXXX</td>
	<td>XXXX</td>
	<td colspan="2">XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
</tr>
</thead><tbody>
   <tr>
...

CSS

@media print {
	body
	{
		-webkit-print-color-adjust: exact;
	}
	
	@page
	{
		counter-increment: page 2;
		margin: 10px;
		size: A4 landscape;
	}
	
	body div
	{
		font-family: Calibri;
		font-size: 11pt;
	}
}

.a4_landscape
{
	margin: 0;
	padding: 0.5cm;
}

.footer
{
	bottom: 0;
	position: fixed;
	width: 97%;
}

.footer > div
{
	display: flex;
	justify-content: space-between;
	text-align: center;
}

.header
{
	display: flex;
	justify-content: space-between;
	text-align: right;
}

.middle_center
{
	background-color: #b8cce4;
	text-align: center;
	width: 100%;
}

.middle_first div div div
{
	white-space: nowrap;
}

.middle_first
{
	display: flex;
	justify-content: space-between;
	width: 60%;
}

.placeholöder
{
	height: 2em;
	width: 100%;
}

.size_11
{
	font-family: Calibri;
	font-size: 11pt;
}

.size_16
{
	font-family: Calibri;
	font-size: 16pt;
}

.text_bold
{
	font-weight: 700;
}

#maintable
{
	width: 100%;
}

#page_number: : after
{
	content: counter(page);
}

#table_goodsdata,#table_packagedata
{
	border-collapse: collapse;
}

#table_goodsdata
{
	margin-bottom: 100px;
	width: 100%;
}

#table_packagedata td,#table_goodsdata td
{
	border: 1px solid #000;
	padding-left: 3px;
	padding-right: 3px;
}
#table_goodsdata thead td
{
  background-color: #b8cce4;
	text-align: center;
}