JSFiddle - React, Tailwind, and code Playground

by wwt

HTML

<div>
 <figure class="fig">
   <img src="http://fonday.ru/images/tmp/16/9/original/16928DmervZwIjMnAqxGdL.jpg"  alt="">
   <figcaption>
   Просто подпись к первой картинке. Может быть еще и описание данной картинки и как я ее снимала.
   </figcaption>
  </figure>
 </div>

CSS

body {
    background-color: #080c0e;
}


   
div {
    background: #2e2e2e; /* Цвет фона */
    color: #fff; /* Цвет текста */
    padding: 5px; /* Поля вокруг текста */
    border: 1px solid rgb(60, 60, 60);
    border-radius: 5px; /* Уголки */
    width: 400px;
    margin: 0 auto;
    box-shadow: 0 0 2px rgba(255,255,255,.1);
}
.fig {
    display: block; /* Блочный элемент (для старых браузеров) */
    text-align: center; /* Выравнивание по центру */
    font-style: italic; /* Курсивное начертание */
    margin: 20px;
    color: #FFFFFF; /* Цвет подрисуночной подписи */
    text-shadow: 1px 1px 0 rgba(0,0,0,.7);
}
.fig > img {
    border-radius: 5px;
    width: 100%;
}
.fig > figcaption {
    padding-top: 15px;
}