JSFiddle - React, Tailwind, and code Playground

HTML

<section class="section">
  <h1>Какой-нибудь текст по центру картинки</h1>
  <img class="main__img" src="https://luxfon.com/images/201203/luxfon.com_4224.jpg" alt="Astana">
</section>

CSS

.section {
  position: relative;  
}

h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2vw;
    font-family: 'PT Sans Narrow', sans-serif;
    color: #4682B4;
    opacity: 1;
}

.main__img {
    position: relative;
    width: 100%;
    height: auto;
    opacity: .3;
}