JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
  <h1>Какой-то Заголовок</h1>
  <p>Приятно, граждане, наблюдать, как некоторые особенности внутренней политики представляют собой не что иное, как квинтэссенцию победы маркетинга над разумом и должны быть указаны как претенденты на роль ключевых факторов.</p>
  <div></div>
</div>
<div class="parent-1">
  <h1>Какой-то Заголовок</h1>
  <p>Приятно, граждане, наблюдать, как некоторые особенности внутренней политики представляют собой не что иное, как квинтэссенцию победы маркетинга над разумом и должны быть указаны как претенденты на роль ключевых факторов.</p>
  <div></div>
</div>

CSS

*{
  margin: 0;
  padding: 0;
}
.parent{
  float: left;
  width: 100%;
  height: auto;
  background-color: SlateBlue;
  font-family: Roboto, sans-serf;
}
.parent > h1{
  float: left;
  width: 100%;
  margin-bottom: 25px;
  background-color: IndianRed;
  font-size: 30px;
  line-height: 1.3;
}
.parent > p{
  float: left;
  width: 100%;
  margin-bottom: 25px;
  background-color: MediumSeaGreen;
  font-size: 16px;
  line-height: 1.6;
}
.parent > div{
  float: left;
  width: 100%;
  height: 50px;
  background-color: SlateGray;
}

.parent-1{
  float: left;
  width: 100%;
  height: auto;
  margin-top: 50px;
  background-color: SlateBlue;
  font-family: Roboto, sans-serf;
}
.parent-1 > h1{
  float: left;
  width: 100%;
  margin-bottom: 25px;
  font-size: 30px;
  line-height: 1.3;
}
.parent-1 > p{
  float: left;
  width: 100%;
  margin-bottom: 25px;
  font-size: 16px;
  line-height: 1.6;
}
.parent-1 > div{
  float: left;
  width: 100%;
  height: 50px;
  background-color: SlateGray;
}