JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<style>
   html, body {
    height: 100%;
   }
   .wrapper {
   position: relative; /* что бы абсолютное позиционирование отсчитывалось от этого блока, а не от body */
    background: white; /* Цвет фона */
    width: 400px;
    height: 100%; /* Высота блока */
    margin: 0 auto;
    border: 1px solid black;
   }
   .box1 {
    position: absolute; /* Абсолютное позиционирование */
        overflow: hidden; /* что бы контент не растягивал высоту блока, можно и scroll и auto поставить вместо hidden */
    width: 150px;
    height: 150px;
    top: 30px;
    left: 30px;
    border: 1px solid black;
   }
      .box2 {
    position: absolute; /* Абсолютное позиционирование */
        overflow: hidden; /* что бы контент не растягивал высоту блока, можно и scroll и auto поставить вместо hidden */
    width: 150px;
    height: 150px;
    top: 30px;
    right: 30px;
    border: 1px solid black;
   }
      .box3 {
    position: absolute; /* Абсолютное позиционирование */
        overflow: hidden; /* что бы контент не растягивал высоту блока, можно и scroll и auto поставить вместо hidden */
    width: 150px;
    height: 150px;
    bottom: 30px;
    left: 30px;
    border: 1px solid black;
   }
      .box4 {
    position: absolute; /* Абсолютное позиционирование */
        overflow: hidden; /* что бы контент не растягивал высоту блока, можно и scroll и auto поставить вместо hidden */
    width: 150px;
    height: 150px;
    bottom: 30px;
    right: 30px;
    border: 1px solid black;
   }  
  </style>
</head>
 <body>
  <div class="wrapper">
   <div class="box1"></div>
   <div class="box2"></div>   
   <div class="box3"></div>
   <div class="box4"></div>
  </div>
 </body>
</html>