JSFiddle - React, Tailwind, and code Playground

by Vladislav Altyncev

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 class="item-block-price1" href="">55 268 дол</a>
        <a class="item-block-price2" 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;
    position: relative;
    height: 40px;
    width: 100%;
}
 
.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;
    width: 100%;
    position: absolute;
}
 
.item-block-price2 {
    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...