JSFiddle - React, Tailwind, and code Playground

HTML

<div id="directory">
  <div class="headerbg"></div>
  <h1 style="position:relative;z-index:1">
  Rental Directory
  </h1>
</div>

CSS

#directory { padding: 10px 0 10px 20px; position: relative; height: 35vh; background-image: url('https://markshimazuphotography.files.wordpress.com/2013/05/san_diego_skyline_coronado_sunset.jpg'); background-repeat: no-repeat; color: #fff;}
.headerbg { background-color: rgba(0,0,0,0.5); width: 40em; height: 8em; position: absolute; top: 10px; left: 0; }
h1 { font-size: 50px; border-bottom: 15px solid #e8cd54; }