JSFiddle - React, Tailwind, and code Playground

HTML

<div class="caption">
                      <div class="caption-inner">
                        <div class="caption-inner-cell">
                          <span class="caption-text">
                            <h2 class="caption-title pink-text">
                              <?php the_title(); ?>php : the_title();
                            </h2>
                             <div class="caption-sub-title">
                              <?php the_content(); ?> php : the_content(); 
                            </div>
                          </span>
                        </div>
                      </div>
                    </div>

CSS

.caption {
 position: absolute;
 height: 100%;
 top:0;
 display: block;
 width: 100%;
 z-index: 100;
}
.caption-inner {
 display:table;
 text-align: center;
 height: 100%;
 width: 100%;
}
.caption-inner-cell {
 display: table-cell;
 text-align: center;
 background-color: rgba(0,0,0,.0);
 vertical-align: middle;
 }
.caption-text {
  z-index: 0;
  position:relative;
  display:block;
  padding: 35px 0;
  margin:0;
  font-size: 28px;
  font-weight: bold;
  background: url(img/extra/transparent-22-percent.png);
  background-repeat: repeat;
 }