JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <div class="product">
        <a href="" class="product-img-link">
            <img src="http://lorempixel.com/400/400" alt="">
            </a>
            <h1 class="product-title">
                <a href="" class="product-title-link">название название название название название название название название название название название</a>
            </h1>
            <div class="buy-zone"><a href="" class="buy-it">купить</a></div>
        </div>
        
        <div class="product">
        <a href="" class="product-img-link">
            <img src="http://lorempixel.com/400/400" alt="">
            </a>
            <h1 class="product-title">
                <a href="" class="product-title-link">название</a>
            </h1>
            <div class="buy-zone"><a href="" class="buy-it">купить</a></div>
        </div>
            
            <div class="product">
        <a href="" class="product-img-link">
            <img src="http://lorempixel.com/400/400" alt="">
            </a>
            <h1 class="product-title">
                <a href="" class="product-title-link">название</a>
            </h1>
            <div class="buy-zone"><a href="" class="buy-it">купить</a></div>
        </div>
    </div>

CSS

.product{
    width: 200px;
    float: left;
    margin-left: 15px;
    height:350px;
}

.product:first-child{
    margin-left: 0;
}

.product-img-link{
    display: block;
    width: 100%;
    height: 200px;
    position: relative;
    margin-bottom:20px;
}

.product-img-link img{
    position: absolute;
    max-width:100%;
    top:0;
        bottom:0;
    left:0;
    right:0;
    margin:auto;
}

.product-title{
    height: 50px;
    overflow:hidden;
    padding: 10px 0;
    display:table;
    width:100%;
    border-top:1px solid #333;
    border-bottom:1px solid #333;
    font-size:12px;
    font-weight:normal
}

.product-title-link {
  display: table-cell;
  vertical-align: middle;
}