JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
  <img src="">
    <div class="banner">
      <div class="banner_content">
        <div class="banner_title">
        THIS MESSAGE IS A TEST MESSAGE
       </div>
       <div>
         <button>
           This is a test button
         </button>
       </div>
      </div>
  </div>
</div>

CSS

.box{
  text-align:center;
  display: table;
  width: 100vw;
  height: 100vh;
}

.banner {
    font-size: 32px;
    display: table-cell;
    vertical-align: middle;
    height; auto;
    background-image: url('http://dummyimage.com/1000x400/b895b8/fff.jpg&text=+');
    background-size: cover;
   }

.banner_title {
  background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0;color: #fff;
  display: inline-block;
}

.banner_title > div {
    padding: 15px;
}