JSFiddle - React, Tailwind, and code Playground

HTML

<div class="somediv">
<h2 class="text-logo">Lorem ipsum dolor sit amet.</h2>
</div>

CSS

.somediv {
  width: 500px;
  height: 200px;
  background: #eeeeee;
  text-align: center;
  padding-top: 50px;
  position: relative;
  z-index: 100;
}

.text-logo {
  position: relative;
  display: inline;
  text-transform: uppercase;   
  background: #f8f3f0; 
  z-index: 100;
}
.text-logo:after {
  content: "";
  display: block;
  position: relative; 
  border-bottom: 2px solid red; 
  top: -15px;
  z-index: 1;