JSFiddle - React, Tailwind, and code Playground

by Thiago Diniz

HTML

<ul class="banner">
  <li class="banner-item"><img src="http://www.cmark.com.br/recursos/css/img/bgtopo.jpg" alt=""><h3>Banner 1</h3></li><!-- 
  --><li class="banner-item"><img src="http://www.cmark.com.br/recursos/css/img/bgtopo.jpg" alt=""><h3>Banner 2</h3></li>
</ul>

CSS

*{
  font-family:sans-serif;
  box-sizing:border-box
}

img{
  max-width:100%;
  display:block
}

.banner{
  padding:15px;
  width:100%
}

.banner-item{
  width:50%;
  display:inline-block;
  vertical-align:top;
  position:relative
}

.banner-item:before{
  content:"";
  height:100%;
  width:100%;
  background-color:#000000b3;
  position:absolute;
  z-index:1
}

.banner-item h3{
  top:50%;
  left:50%;
  color:#FFF;
  font-size:24px;
  transform:translate(-50%,-50%);
  position:absolute;
  z-index:2
}