JSFiddle - React, Tailwind, and code Playground

by gayanov2017

HTML

<div class="item">
  <img src="https://wightworld.turbocraft.ru/images/about-image-1.png">
  <div class="item-content">
    <div class="item-text">
      <h3>Мы любим своих игроков</h3>
      <p>У нас собраны лучшие мини-игры всего майнкрафта. Но это все вранье и админ нуб.</p>
    </div>
  </div>
</div>

CSS

.item {
  position: relative;
}

.item img {
  width: 100%;
}

.item .item-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.item .item-content .item-text {
  width: 50%;
  font-size: 18px;
  color: white;
  text-shadow: 0 0 1px black;
}