JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<style>
     
@page {
         width: 210mm;
         height: 297mm;
         padding: 0;
         margin: 0;
         overflow: visible;
       }
  
.page {
         break-before: page;
         width: 198mm;
         height: 287mm;
         padding-top: 0mm;
         padding-left: 10mm;
         padding-bottom: 0mm;
         padding-right:0mm;
         margin: 0mm;
         overflow: visible;
         border: 1mm solid #4CAF50;
       }     
      
.section {
  padding: 0;
  margin: 0;
  border: 2px solid #4CAF50;
  background-color: red; 
  overflow: visible;  
  display: inline-block; 
}

.section.nextphase {
  width: 50mm;
  height: 50mm;
  margin-right:0mm;
  margin-left:0mm;
  margin-top:7mm;
}
      
.square {
  background-color: #E5F5F5;
  width:100%;
  height: 100%;
  border-radius: 3.5mm;
  
}

</style>
<title>Last page</title>
</head>
<body>
<div class="page">
 
  <!--<div style=" margin:10mm;" >-->
    
  <div class="section nextphase">
    <div class="square" >
    </div>
  </div>
  

  <div class="section nextphase">
    <div class="square" >
    </div>
  <!--</div>-->
  </div>
 
</div>
</body>
</html>