JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
  <div class="image"> 
    <div class="text">
       <p> I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU  I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU  I LOVE YOU  I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU  I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU  I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU  I LOVE YOU</p>
    </div>
  </div>
</div>

CSS

.wrap{
  width: 100%;
  background: #000 none repeat scroll 0% 0%;
}
.image{
  background-image: url("https://pbs.twimg.com/profile_banners/1550273796/1372363601/1500x500");
    background-size: cover;
  opacity: 0.8;
  height: 100vh;
    max-height: 350px;
min-height: 200px;
}
.text{
  color: #FFF;
    font-weight: 900;
}