JSFiddle - React, Tailwind, and code Playground

HTML

<body style="max-width: 500px; padding-left: 80px; padding-right: 20px;">
    <p>Предсказуемость непредсказуема. Предсказуемость непредсказуема. Предсказуемость непредсказуема. Предсказуемость непредсказуема. Предсказуемость <em data-ref="1">непредсказуема и недоказуема</em>. Предсказуемость непредсказуема. Предсказуемость непредсказуема. Предсказуемость совсем ни разу не  <em data-ref="2, 3, 4">непредсказуема</em>. Предсказуемость непредсказуема. Предсказуемость непредсказуема. Предсказуемость непредсказуема. </p>
    
    <p>Однако, здравствуйте.</p>
    
    <figure>
      <figcaption>
          A cute cat
          <span class="subtitle">is in the picture</span>
      </figcaption>
      <img src="http://lorempixel.com/350/250/cats" alt="A cute Kitten">      
    </figure>

CSS

body{
	font-family: 'Times New Roman';

}

figcaption{
	
 background-color: black;
 color:white;
 opacity: 0.6;
 position: relative;
 bottom:-250px;
 left:-40px;
 max-width: 340px;
 font-size: 25px;
 padding-left: 10px;
 z-index: 1;
}
span.subtitle{
	font-size: 14px;
	color:#c0c0c0;
	margin-top: -2px;
	display: block;
}
img{
	position: absolute;
	display: block;
    max-width: 70%;
    z-index: 0;
    left:88px;
}