JSFiddle - React, Tailwind, and code Playground

HTML

<body>

    <div class = "top">
      <div class="container">
      <h1>header</h1>
      </div>
    </div>

    <div class = "bottom">
      <div class="container">
      <h1>text</h1>
      </div>
    </div>


</body>

CSS

html, body {
  font-family:;
  margin:0 auto;
  text-transform: lowercase;
  font-family: Europa;
  letter-spacing: 0.5px;
}

.container {
  padding:0;
  margin:0 auto;
}

.top {
  background-color: blue;
  position: absolute;
  width: 300px;
  height: 200px;
  z-index: 15;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -150px;
  display:inline-block;
}
.top h1 {
  width:100%;
  font-size:50px;
  color:#2CCDAD;
}

.bottom {
  position: absolute;
  width: 300px;
  height: 200px;
  z-index: 15;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -150px;
  display:inline-block;
}
.bottom h1 {
  font-size:40px;
  color:black;
  width:100%;
}