JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mainJumbotron">
<h1>This is a title</h1>
</div>

CSS

.mainJumbotron {
        position: relative;
        margin: 0px;
        height: 250px;
        text-align: center;
        background-image: url(https://www.alphachannelgroup.com/wp-content/themes/acg/images/logo.png);
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .mainJumbotron:before {
      content: "";
      background: black;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      opacity: .4;
      z-index:1;
    }
    
    .mainJumbotron > * {
        position:relative;
        z-index:2;
    }
    h1 {
      color: white;
      position:relative;
      z-index:2;
    }