JSFiddle - React, Tailwind, and code Playground

by t2t2

HTML

<div class="img-background">
  <h1>Contact us</h1>
  <a class="link-box" href="#">link</a>
</div>

CSS

.img-background {
  background:
    linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)),
    url("https://images.unsplash.com/photo-1678933964625-0b57a7ce3c1f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80") center / cover no-repeat;
  height: 20rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  color: #fff;
}
.link-box {
  color: #ffF;
  border: 1px solid #fff;
  padding: 1rem;
  text-decoration: none;
}