JSFiddle - React, Tailwind, and code Playground

HTML

<main>
  Here goes you main content. As you can see the boxes are on top of this content. I suppose that's what you want. Anyways you can use z-index CSS property to avoid this.<br />
  Try to resize this iframe and you'll see the divs stay exacty on the corner. You could apply some padding/margin to leave a little space.
  <ul>
    <li id="top-right" class="parent-wrapper">
      <div class="flex">
          <div class="child">1a</div>
          <div class="child">2a</div>
      </div>
      <div class="flex">
          <div class="child">3a</div>
          <div class="child">4a</div>
      </div>
    </li>
    <li id="top-left" class="parent-wrapper">
      <div class="flex">
          <div class="child">1b</div>
          <div class="child">2b</div>
      </div>
      <div class="flex">
          <div class="child">3b</div>
          <div class="child">4b</div>
      </div>
    </li>
    <li id="bottom-right" class="parent-wrapper">
      <div class="flex">
          <div class="child">1c</div>
          <div class="child">2c</div>
      </div>
      <div class="flex">
          <div class="child">3c</div>
          <div class="child">4c</div>
      </div>
    </li>
    <li id="bottom-left" class="parent-wrapper">
      <div class="flex">
          <div class="child">1d</div>
          <div class="child">2d</div>
      </div>
      <div class="flex">
          <div class="child">3d</div>
          <div class="child">4d</div>
      </div>
    </li>
  </ul>
</main>

CSS

html, body, main {width: auto; height: auto; margin: 0; padding: 0;}
main {background-color: lightskyblue; width: 100%; height: 100%;}
ul {list-style: none; padding: 0; height: auto; width: auto;}
li {display: inline-block; position: absolute; background-color: blueviolet; padding: 0.5rem; box-sizing: border-box;}

.parent-wrapper {height: auto; width: auto; border: 1px solid black;}
#top-right {top: 0; right: 0;}
#top-left {top: 0; left: 0;}
#bottom-right {bottom: 0; right: 0;}
#bottom-left {bottom: 0; left: 0;}

.child {width: 3rem; height: 1.5rem; background-color: brown; border: 1px solid gray;}

.flex {
    width: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}