JSFiddle - React, Tailwind, and code Playground

HTML

<!--Начало блока-->
                            <div class="item-block">
                                <div class="item-block-img">
                                    <a href="">
                                        <img src="https://www.vivatao.com/taoimages/img04/bao/uploaded/i4/T1a7tSXuhbXXXXXXXX_!!0-item_pic.jpg_200x200.jpg" alt="">
                                    </a>
                                </div>
                                <div class="item-block-title">
                                    <a href="">фыв</a>
                                </div> 
                                <div class="item-block-price">
                                    <a href="">55 268 дол</a>
                                </div>
                                <div class="item-block-price2">
                                    <a href="">Перейти к товару</a>
                                </div>
                            </div>
                            <!--Конец блока-->

CSS

.item-block {
    overflow: hidden;
    float: left;
    width: 23%;
    border: 1px solid #C9CBCD;
    padding: 5px;
    margin: 0 2% 2% 0;
}
 
.item-block:hover {
    border: 1px solid #c0392b;
}
 
.item-block-img {
    overflow: hidden;
}
 
.item-block-img img {
    width: 100%;
    height: 150px;
}
 
.item-block-title {
    text-align: center;
    margin: 2px 0;
    height: 40px;
}
 
.item-block-title a {
    text-decoration: underline;
    display: block;
    color: #3d74aa;
}
 
.item-block:hover > .item-block-title a {
    color: #c0392b;
}
 
.item-block-desc {
    overflow: hidden;
    text-align: center;
    margin: 2px 0;
    height: 40px;
}
 
.item-block-price { 
    overflow: hidden;
}
 
.item-block-price a {
    background: #5aa8d1;
    background: -moz-linear-gradient(top,  #5aa8d1 0%, #2493c3 50%, #3d74aa 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5aa8d1), color-stop(50%,#2493c3), color-stop(100%,#3d74aa));
    background: -webkit-linear-gradient(top,  #5aa8d1 0%,#2493c3 50%,#3d74aa 100%);
    background: -o-linear-gradient(top,  #5aa8d1 0%,#2493c3 50%,#3d74aa 100%);
    background: -ms-linear-gradient(top,  #5aa8d1 0%,#2493c3 50%,#3d74aa 100%);
    background: linear-gradient(to bottom,  #5aa8d1 0%,#2493c3 50%,#3d74aa 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5aa8d1', endColorstr='#3d74aa',GradientType=0 );
    color: #fff;
    padding: 5px;
    border-bottom: 3px solid #225688;
    text-align: center;
    display: block;
}
 
.item-block-price2 { 
    overflow: hidden;
}
 
.item-block-price2 a {
    background: #5aa8d1;
    background: -moz-linear-gradient(top,  #5aa8d1 0%, #2493c3 50%, #3d74aa 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5aa8d1), color-stop(50%,#2493c3), color-stop(100%,#3d74aa));
    background: -webkit-linear-gradient(top,  #5aa8d1 0%,#2493c3 50%,#3d74aa 100%);
    background: -o-linear-gradient(top,  #5aa8d1...