JSFiddle - React, Tailwind, and code Playground

HTML

<div class="k-container">
    <div class="k-card k-bgimage">
        <h1>Voll am swaggen scuuuur</h1>
    </div>
</div>

CSS

.k-card {
  height: 150px;
  width: 300px;
  padding: 20px;
}
.k-bgimage {
  position: relative;
  background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRCEdpzt85BJ_FTjCInzuS_i1ht01D-EUDkRvEbgQKd-m-bMtK1RA") no-repeat;
  background-size: cover;
}
.k-bgimage:before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0,0,0,.5);
}
h1 {
  color: #fff;
  position: relative;
}