JSFiddle - React, Tailwind, and code Playground
HTML
<div class="reviews">
<div class="reviews_first">
<ul class="reviews_first_list">
<li><b>Ирина</b></li>
<li>18.10.2017</li>
</ul>
<p>Уборка без моего участия, возможность программи-рования, стильный дизайн.У нас в доме кот, и этим все сказано. Шерсть повсюду. Устав бороться с этим безобразием, купила наконец робот...<a href="#" class="reviews__link">Читать далее</a></p>
<ul class="reviews_second_list">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
<div class="reviews_second">
<ul class="reviews_first_list">
<li><b>Юрий</b></li>
<li>12.10.2017</li>
</ul>
<p>Удобная незаменимая вещь! Если есть ленивые жены, дети, собаки, кошки, хомячки, попугаи и другие домашние любимцы - это для вас! Включил и забыл.
Но не забывайте чистить и заряжать. Больше ... <a href="#" class="reviews__link">Читать далее</a></p>
<ul class="reviews_second_list">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
</div>
CSS
.reviews {
padding-top: 145px;
text-transform: none;
display: flex;
justify-content: center;
}
.reviews_first_list {
list-style: none;
font-size: 14px;
line-height: 24px;
margin: 0;
padding: 0;
}
.reviews_first_list b {
font-size: 24px;
line-height: 24px;
}
.reviews_second, .reviews_first{
width: 505px;
}
.reviews__link {
text-decoration: none;
padding: 0 25px;
color: #B3B3B3;
}
.reviews__link:hover {
color: black;
opacity: 0.7;
}
.reviews_second_list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
.reviews_second_list li {
text-align: center;
line-height: 35px;
}
.reviews_second_list a {
text-decoration: none;
background: transparent url(https://a.d-cd.net/8d9c7du-480.jpg);
padding: 6px 17px;
background-position: 34px -2px;
}
.reviews_second_list a:hover {
background: transparent url(https://a.d-cd.net/8d9c7du-480.jpg);
background-position: 136px -2px;
}