JSFiddle - React, Tailwind, and code Playground

by Velimir Topolovacki

HTML

<div class="wrapper">
  
  <div class="child-01">Child-01</div>
  <div class="child-02">Child-02</div>
  
</div>

CSS

html, body {
  height: 100%;
  overflow: hidden;
  margin:0;
}

.wrapper {
  height: 100%;
  background-color: black;
  position:relative;
}

.child-01 {
  width: 600px;
  height: 450px;
  background-color: red;
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
}
.child-02 {
  width: 350px;
  height: 350px;
  background-color: blue;
   position:absolute; left:50%; transform:translateX(-50%);
}