JSFiddle - React, Tailwind, and code Playground

HTML

<div class="product-list">
    <div>
    <div class="name">Блок цилиндров</div>
    <div class="description">Компрессор: <b>1П10  • ФВ6  • ФУ12 • 1П20 </b> / Деталь: <b>Блок цилиндров </b> / Обозначение: <b>8Г39-0101-26 </b> / Комплектация: <b>1 шт. </b></div>
    <div class="price">825 грн.</div>
    <div class="cart"><input type="button" value="Купить" onclick="addToCart('67');" class="button" /></div>
    </div>
        <div>
    <div class="name">Блок цилиндров</div>
    <div class="description">Компрессор: <b>1П10  • ФВ6  • ФУ12 • 1П20 </b> / Деталь: <b>Блок цилиндров </b> / Обозначение: <b>8Г39-0101-26 </b> / Комплектация: <b>1 шт. </b></div>
    <div class="price">825 грн.</div>
    <div class="cart"><input type="button" value="Купить" onclick="addToCart('67');" class="button" /></div>
    </div>
        <div>
    <div class="name">Блок цилиндров</div>
    <div class="description">Компрессор: <b>1П10  • ФВ6  • ФУ12 • 1П20 </b> / Деталь: <b>Блок цилиндров </b> / Обозначение: <b>8Г39-0101-26 </b> / Комплектация: <b>1 шт. </b></div>
    <div class="price">825 грн.</div>
    <div class="cart"><input type="button" value="Купить" onclick="addToCart('67');" class="button" /></div>
    </div>
        <div>
    <div class="name">Блок цилиндров</div>
    <div class="description">Компрессор: <b>1П10  • ФВ6  • ФУ12 • 1П20 </b> / Деталь: <b>Блок цилиндров </b> / Обозначение: <b>8Г39-0101-26 </b> / Комплектация: <b>1 шт. </b></div>
    <div class="price">825 грн.</div>
    <div class="cart"><input type="button" value="Купить" onclick="addToCart('67');" class="button" /></div>
    </div>
        <div>
    <div class="name">Блок цилиндров</div>
    <div class="description">Компрессор: <b>1П10  • ФВ6  • ФУ12 • 1П20 </b> / Деталь: <b>Блок цилиндров </b> / Обозначение: <b>8Г39-0101-26 </b> / Комплектация: <b>1 шт. </b></div>
    <div class="price">825 грн.</div>
    <div class="cart"><input type="button" value="Купить" onclick="addToCart('67');" class="button" /></div>
   ...

CSS

.product-list > div{position: relative;border:1px solid #F8F8F8;display: inline-block;margin-bottom:20px;margin-left:1%;margin-right:1%;vertical-align:top;width:18.5%;padding:2%;}
.product-list > div:hover{position: relative;z-index: 1;background:#FFF;border:1px solid rgba(0,0,0,0.15);box-shadow:0 6px 12px rgba(0,0,0,0.176);}
.product-list .name{height:35px;overflow:hidden;text-align:center;}
.product-list .description{display:none;font-size:11px;padding:5px 0;}
.product-list > div:hover > .description{position: relative;z-index: 1;display:block;}
.product-list .price{display:block;font-size:16px;font-weight:700;text-align:center;margin-top:5px;color:#333;margin-bottom:10px;}