JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
        <div class="row" id="landing-header">
          <div class="col-lg-12 landing-header-media">    
              <img src="http://placehold.it/1170x446" alt="Photo description" class="landing-img" /> 
              <div class="landing-header-content">
                <div class="row">
                   <div class="block" style="height:100%;">
                      <div class="centered">
                        <h1>Hi. I'm <strong>XXX</strong>.</h1>
                        <h3 class="vthin" style="margin-top:0;">quote here</h3>
                      </div>
                    </div>
                </div>
              </div>
          </div>
        </div>
      </div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

.block {
  text-align: center;
}
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}
.centered {
  display: inline-block;
  vertical-align: middle;
  width:95%;
}

#landing-header {
    border: 3px solid white; /* New */
}
.landing-header-media {
    padding-left: 0; /* New */
    padding-right: 0; /* New */
}
#landing-header .landing-header-content {
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 0px; /* Changed Value */
  padding: 20px;
  left: 0px; /* Added */
  right: 0px; /* Added */
}
#landing-header .landing-header-content p {
  color: white;
}
#landing-header .landing-img {
  width: 100%;
  position: relative; 
}