JSFiddle - React, Tailwind, and code Playground

HTML

<div
  class="d-flex align-items-stretch mb-3 rounded shadow text-center bg-image img-fluid"
  style="
      background-image: url('https://mdbcdn.b-cdn.net/img/new/slides/041.jpg');
      height: 400px;
      background-repeat: no-repeat;
      background-size: cover;
      margin-top: -1rem !important;">

  <div class="mask w-100" style="background-color: rgba(0, 0, 0, 0.6);">
    <div class="d-flex justify-content-center">
  <!-- This section needs to go to the bottom -->
      <div class="py-4 text-white">
        <h1 class="mb-3">Welcome to the Tool Center!</h1>
        <a class="btn btn-outline-light btn-lg" href="{{site.url}}/puppies" role="button">See our Newest Tools!</a>
      </div>
    </div>
  </div>
</div>

CSS

@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css");