JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
  <div class="item" data-color="green">
    <h1 class="subtitle">lorem 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa aut a placeat, illum suscipit, consequatur officiis veritatis adipisci incidunt sapiente repellendus consequuntur. Enim architecto harum, doloribus illo veritatis omnis facilis.</p>
  </div>
  <div class="item" data-color="black">
     <h1 class="subtitle">lorem 2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa aut a placeat, illum suscipit, consequatur officiis veritatis adipisci incidunt sapiente repellendus consequuntur. Enim architecto harum, doloribus illo veritatis omnis facilis.</p>
  </div>
  <div class="item" data-color="orange">
    <h1 class="subtitle">lorem 3</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa aut a placeat, illum suscipit, consequatur officiis veritatis adipisci incidunt sapiente repellendus consequuntur. Enim architecto harum, doloribus illo veritatis omnis facilis.</p>
  </div>
</div>

CSS

.item {
  position: relative;
  padding-top: 25px;
}

.item:after {
  position: absolute;
  content: ' ';
  top: 0px;
  left: 0px;
  width: 100%;
  height: 5px;
  background-color: attr(data-color);
}

.subtitle {
  background-color: attr(data-color);
}