JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
  <img src="http://dummyimage.com/1000x400/b895b8/fff.jpg&text=+">
    <div class="banner_title">
    <div>
      THIS MESSAGE IS A TEST MESSAGE
     </div>
     <button>
       This is a test button
     </button>
  </div>
</div>

CSS

.box {
  text-align: center;
  position: relative;
  }

.banner_title {
  position: absolute;  
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.banner_title > div {
   background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0;color: #fff;
   padding: 15px;
}