JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="slogan-container">
    <div class="slogan">
    Ваш слоган вот здесь
    </div>
  </div>
  <img src="https://picsum.photos/id/566/600/300">
</div>

CSS

.container {
  background-color: yellow;
  position: relative;
}

.container > img {
  width: 100%;
  display: block;
  opacity: 0.4; 
}

.container .slogan-container {
  position: absolute;
  width: 100%;
  top: 50%;
}

.container .slogan {
  transform: translate(0, -50%);
  font-size: 5rem;
  text-align: center;
}

@media screen and (max-width:600px) {
 .container .slogan {
   font-size: 3.5rem;
 }
}


@media screen and (max-width:300px) {
 .container .slogan {
   font-size: 2rem;
 }
}