JSFiddle - React, Tailwind, and code Playground

HTML

<div class="intro">
<h1>
Welcome
</h1>
<img src="http://dziecisawazne.pl/wp-content/uploads/2011/10/drzewo.jpg" width="800px;">
<div class="overlay"></div>
</div>

CSS

.intro{
  text-align: center;
  position: relative;
 }
.overlay{
    position: absolute;
    opacity: 0.3;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #fff;
    z-index: 1;
}
.intro h1{
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(0,50%);
}