JSFiddle - React, Tailwind, and code Playground
HTML
<ul class="story" style="margin-bottom:0px; -webkit-padding-start:0px;">
<li>
<a href="#">
<div class="wrap">
<img src="https://fakeimg.pl/357x459/?text=Photo2" alt="" width="357" height="459">
</div>
<span>Имя</span>
</a>
</li>
<li>
<a href="#">
<div class="wrap">
<img src="https://fakeimg.pl/357x459/?text=Photo2" alt="" width="357" height="459">
</div>
<span>Хорошим врачом может быть даже ребенок</span>
</a>
</li>
<li>
<a href="#">
<div class="wrap">
<img src="https://fakeimg.pl/357x459/?text=Photo2" alt="" width="357" height="459">
</div>
<span>Имя</span>
</a>
</li>
<li>
<a href="#">
<div class="wrap">
<img src="https://fakeimg.pl/357x459/?text=Photo2" alt="" width="357" height="459">
</div>
<span>Имя</span>
</a>
</li>
<li>
<a href="#">
<div class="wrap">
<img src="https://fakeimg.pl/357x459/?text=Photo2" alt="" width="357" height="459">
</div>
<span>Имя</span>
</a>
</li>
CSS
.story{overflow:hidden; font-size:0;}
.story li{display:inline-block; width:calc(25% - 20px); margin:10px; vertical-align:top;}
.story li a{display:block; width:100%; height:100%;}
.story li .wrap{position:relative;}
.story li .wrap > img{width:100%; height:230px;}
.story li .wrap .selca_over{width:100%; height:100%; position:absolute; top:0; left:0; background:rgba(255, 255, 255, 0.75); display:none;}
.story li .wrap .selca_over img{position:absolute; top:50%; left:50%; margin:-23px 0 0 -58.5px;}
.story li span{display:inline-block; font-size:17px; color:#fff; font-weight:500; background-color: rgba(53,32,117,1); padding: 5px 10px;}
@media (max-width: 640px){
.story li{display:inline-block; width:calc(50% - 20px); margin:0 10px; vertical-align:top; margin-bottom:15px;}
.story li .wrap > img{width:100%; height:auto;}
}