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

h1 {
    position: absolute;
    margin-top: 200px;
    margin-left: 250px;
    font-size: 7vw;
    font-family: 'PT Sans Narrow', sans-serif;
    color: #4682B4;
    opacity: 1;
}

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