JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bg">
  <div class="block">
    <h1>заголовок Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, consectetur! Itaque repudiandae expedita harum, sint, neque doloribus dolorem accusantium architecto iste id, eum. Modi animi, soluta veritatis quaerat voluptatum. Cumque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, eos?</h1>
    <p>Подтекст Разъедется при переполнении Разъедется при переполненииРазъедется при переполненииРазъедется при переполнении Разъедется при переполненииРазъедется при переполненииРазъедется при переполненииРазъедется при переполненииРазъедется при переполнении</p>
  </div>
</div>

CSS

* {
  padding: 0;
  margin: 0;
}
.bg  {
  background: linear-gradient(180deg, #C4C4C4 50%, #FFFFFF 50%);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.block {
  text-align:center;
  padding: 20px;
  background: linear-gradient(180deg, #FFFFFF 50%, #C4C4C4 50%);
  width: 80%;
}
.block p {
  margin-top: 25px;
}