JSFiddle - React, Tailwind, and code Playground

HTML

<div class="yellow">
  <p>
    Текст
  </p>
</div>
<div class="white">
  <p>
    Текст
  </p>
</div>
<div class="gray">
  <p>
    Текст
  </p>
</div>

CSS

body {
  background-color: #F2F2F2;
}

.white {
    width: 80%;
    height: 80%;
    position: absolute;
    background-color: #fff;
    top: 10%;
    left: 10%;
    z-index: 1;
}

.white p {
    font-weight: bold;
    font-size: 60px;
    position: absolute;
    top: -22px;
    left: 30px;
}

.yellow {
    width: 80%;
    height: 20%;
    background-color: #FFE862;
    position: absolute;
    right: 0;
    top: 0;
 }
 
 .yellow p {
    position: absolute;
    font-weight: bold;
    text-transform: uppercase;
    bottom: 63px;
    z-index: 2;
    color: #444;
}
 
 .gray {
    background-color: #EBEBEB;
    width: 100%;
    height: 20%;
    position: absolute;
    bottom: 0;
 }
 
 .gray p {
    position: absolute;
    text-transform: uppercase;
    font-size: 48px;
    z-index: 3;
    left: 5%;
    top: 30%;
}