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;}

.banner_title {
    font-size: 32px;
    position: absolute;
    top: 50%;
    width: 100%;
}

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