JSFiddle - React, Tailwind, and code Playground

HTML

<header>
  <section>
    <div class="img_content">
      <div class="bg_img" style="background-image: url('path-to-image');" >
        <div class="container">
          <h1 class="content_h1">Most Popular Lunches: Week 11</h1>
        </div>
      </div>
    </div>
  </section>
</header>

CSS

/*Custom CSS */
.img_content {
  /* background: url(); */
  background-repeat: no-repeat;
  background-size: cover;
}
header section{
  padding:0;
}

@media screen and (max-width: 768px){
  .content_h1 {
    font-size: 40px;
    padding: 21% 0;
    color: white;
    font-size: 14px;
  }
  .section_details {
    padding: 8% 0 19% 8%;
    font-size: 14px;
  }
}

section {
  padding: 10px 0;
}

.bg_img {
  background: #221f1f73;
  opacity: 0.7;
}
.content_h1 {
  font-size: 85px;
  padding: 14% 0;
  color: white;
}
.section_details {
  padding: 4% 0 0 0;
  font-size: 14px;
}