JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
   <div class="box1"></div>
   <div class="box2"></div>   
   <div class="box3"></div>
   <div class="box4"></div>
  </div>

CSS

html, body {
    height: 100%;
   }
   .wrapper {
   position: relative; /* что бы абсолютное позиционирование отсчитывалось от этого блока, а не от body */
    background: white; /* Цвет фона */
    width: 400px;
    height: 100%; /* Высота блока */
    margin: 0 auto;
    border: 1px solid black;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
   }
   .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;
   }