JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <span></span>
  <span></span>
  <span></span>
  <p>
    Text
  </p>
</div>
<div>
  <span></span>
  <span></span>
  <span></span>
  <p class="b">
    Text
  </p>
</div>
<div>
  <span></span>
  <span></span>
  <span></span>
  <p class="c">
    Text
  </p>
</div>
<div>
  <span></span>
  <span></span>
  <span></span>
  <p class="d">
    Text
  </p>
</div>

CSS

div {
  position: relative;
  width: 300px;
  margin-bottom: 10px;
}

span {
  width: 100%;
  background: #FCC;
  height: 20px;
  display: block;
}

span:nth-child(2) {
  background: #CFC;
  height: 40px;
}

p {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  opacity: .5;
  text-transform: uppercase;
  display: block;
  padding: 0 10px;
  font-size: 40px;
  line-height: 80px;
}

p.b {
  font-family: Arial;
}

p.c {
  font-family: "Comic Sans MS"
}

p.d {
  font-family: monospace;
}