JSFiddle - React, Tailwind, and code Playground

HTML

<header class="header">
  <div class="header-box">
    <h1>
      Lorem Ipsum <br> Dolor sit amet
    </h1>
  </div>
</header>

CSS

.header {
  position: relative;
  height: 100vh;
  background-image: linear-gradient(to right bottom, rgba(17, 63, 112), rgba(253, 135, 31));
  background-position: top;
}

.header-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

h1 {
  text-align: center;
}