JSFiddle - React, Tailwind, and code Playground

by VRus

HTML

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