JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<figure class="image-desc">
	<img src="https://petsjoke.ru/uploads/thumbs/36c6414d9-1.jpg">
	<figcaption>Мы видим очень интересного кота, который о чем-то задумался.</figcaption>
</figure>

CSS

figure.image-desc {
	background: #f9f9f9 !important;
	display: inline-block;
	border-radius: 4px !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
	color: #717171 !important;
	border: 1px solid #bbbbbb !important;
	padding: 0px 0px 4px 0px !important;
}
figure.image-desc figcaption {
	display: inline-block;
	vertical-align: top;
	padding: 0px 8px 0px 8px !important;
	word-wrap: break-word !important;
}
figure.image-desc img {
	border-bottom: 1px solid #bbbbbb !important;
	border-radius: 4px 4px 0px 0px !important;
	box-shadow: none !important;
}