JSFiddle - React, Tailwind, and code Playground

HTML

<div class="left-column-news" id="pop-top">
<div class="item news_title">НАЗВАНИЕ РУБРИКИ</div>

<div class="item news_type1">
<a class="notpodcherk" href="http://SAIT.com"target="_blank">                    
<div class="photo-news"><img src="http://www.shefinds.com/files/2013/08/Megan2014.jpg" alt=""></div>
<div class="name-news"><h3>Заголовок статьи: заголовок заголовок заголовок заголовокзаголовок</h3></div></a>
</div>

<div class="item news_type1">
<a class="notpodcherk" href="http://SAIT.com"target="_blank">                    
<div class="photo-news"><img src="http://www.shefinds.com/files/2013/08/Megan2014.jpg" alt=""></div>
<div class="name-news"><h3>Заголовок статьи: заголовок заголовок заголовок заголовокзаголовок</h3></div></a>
</div>

<div class="item news_type1">
<a class="notpodcherk" href="http://SAIT.com"target="_blank">                    
<div class="photo-news"><img src="http://www.shefinds.com/files/2013/08/Megan2014.jpg" alt=""></div>
<div class="name-news"><h3>Заголовок статьи: заголовок заголовок заголовок заголовокзаголовок</h3></div></a>
</div>

<div class="item news_type1">
<a class="notpodcherk" href="http://SAIT.com"target="_blank">                    
<div class="photo-news"><img src="http://www.shefinds.com/files/2013/08/Megan2014.jpg" alt=""></div>
<div class="name-news"><h3>Заголовок статьи: заголовок заголовок заголовок заголовокзаголовок</h3></div></a>
</div>

<div class="item news_type1">
<a class="notpodcherk" href="http://SAIT.com"target="_blank">             <div class="photo-news"><img src="http://www.shefinds.com/files/2013/08/Megan2014.jpg" alt=""></div>
<div class="name-news"><h3>Заголовок статьи: заголовок заголовок заголовок заголовокзаголовок</h3></div></a>
</div>

<div class="item news_type1">
<a class="notpodcherk" href="http://SAIT.com"target="_blank">             <div class="photo-news"><img src="http://www.shefinds.com/files/2013/08/Megan2014.jpg" alt=""></div>
<div class="name-news"><h3>Заголовок статьи:...

CSS

.left-column-news .photo-news > img 
{width: auto;
height: 150%;}

.photo-news
{display: block;
overflow: hidden;
height: 210px;
position: relative;}

.item {
    float: left;
    width: 220px;
    margin-left: 10px;
    margin-bottom: 10px;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    
}
.item:hover{
    -webkit-box-shadow: 0 0 5px 1px #5b646e;
    -moz-box-shadow: 0 0 5px 1px #5b646e;
    box-shadow: 0 0 5px 1px #5b646e;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

.item.news_title {
    width: 100%;
    font-size: 20px;
    color: #222;
    font-family: Georgia;
    text-transform: uppercase;
    line-height: 20px;
    text-align: center;
    letter-spacing: 0.025em;
    padding-bottom: 10px;
    border-bottom: 1px solid #e6ecec;
    margin-bottom: 4px;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.item.news_title.active {
    color: #ee897f;
    
}
.item.news_title p {
    margin-bottom: 0;
    
}
.item.news_title a {
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    text-decoration: none;
}
.item.news_title a:hover {
    color: #ee897f;
    box-shadow: 0 0 5px 1px #ee897f;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    text-decoration: none;
}


.item.news_type1{
    float: none;
    display: inline-block;
    /*margin-right: -4px;*/
    vertical-align: top;
    padding-bottom: 10px;
    outline: 1px solid #e3e8e6;
}
.item.news_type1 .photo-news {
    position: relative;
}
.item.news_type1 .photo-news:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: transparent;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.item.news_type1:hover .photo-news:after {
    background-color: rgba(0,0,0,.2);
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
 ...