JSFiddle - React, Tailwind, and code Playground

HTML

<div class="top">
 бла бла бла бла
</div>
<hr>
<div class="bottom">
 бла бла бла бла
</div>

CSS

.top{
  background: linear-gradient( transparent 50%, red 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bottom{
  background: linear-gradient(red 50%,transparent 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}