JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box-wrap"style="background:red url(http://www.saadiyat.ae/Admin/Content/banner-img-3.jpg) 50% 50% no-repeat;">
  <div class="img-wrap" >
    <div class="text-wrap">
          <h1>
            Random text
          </h1>
    </div>
  </div>
</div>

CSS

body {
  width:100%;
}
h1{
  margin:0;
}
.box-wrap {
  width:70%;
  background:red;
  height:350px;
}
.text-wrap {
  width:35%;
  position:relative;
  top:25%;
  background:rgba(0,0,0,.5);
}