JSFiddle - React, Tailwind, and code Playground

HTML

<section class="catalog_product">
  <div class="wrapper">
    <div class="row">
      <div class="col_products">
        <div class="row_product">
          <div class="product_item">
            <a href="#" class="img_wrap">
              <img src="https://m.media-amazon.com/images/I/71sV5R1E06L._AC_SY355_.jpg" alt="">
            </a>
            <div class="title">Салями</div>
            <div class="bot_wrap">
                <div class="top_text">Описание продукта</div>
                <div class="size_box">
                  <a href="">35</a>
                  <a href="">40</a>
                  <a href="">45</a>
                </div>
                <div class="price_box">
                  <div class="price">
                  <div class="def_price">850 р.</div>
                </div>
                <a href="#" class="btn_border">Заказать</a>
              </div>
            </div>
          </div>
          <div class="product_item">
            <a href="#" class="img_wrap">
              <img src="https://m.media-amazon.com/images/I/71sV5R1E06L._AC_SY355_.jpg" alt="">
            </a>
            <div class="title">Салями</div>
            <div class="bot_wrap">
                <div class="top_text">Описание продукта</div>
                <div class="size_box">
                  <a href="">35</a>
                  <a href="">40</a>
                  <a href="">45</a>
                </div>
                <div class="price_box">
                  <div class="price">
                  <div class="def_price">850 р.</div>
                </div>
                <a href="#" class="btn_border">Заказать</a>
              </div>
            </div>
          </div>
          <div class="product_item">
            <a href="#" class="img_wrap">
              <img src="https://m.media-amazon.com/images/I/71sV5R1E06L._AC_SY355_.jpg" alt="">
            </a>
            <div class="title">Салями</div>
            <div class="bot_wrap">
                <div...

CSS

*{
  -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.wrapper {
    margin-left: auto;
    margin-right: auto;
    max-width: 1415px;
    padding-left: 30px;
    padding-right: 30px;
}
.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.col_products {
    width: calc(100% - 370px);
    margin: 0 auto;
}
.col_products .row_product {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
}
.col_products .product_item {
    max-width: 350px;
    margin: 0 auto;
}
.product_item {
    background: #fff;
    -webkit-box-shadow: 0px 2px 10px 2px rgb(20 20 20 / 50%);
    box-shadow: 0px 2px 10px 2px rgb(20 20 20 / 50%);
    border-radius: 10px;
    overflow: hidden;
}
.product_item .img_wrap {
    height: 300px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    text-decoration: none;
    background-color: #fff;
    overflow: hidden;
}
.product_item .img_wrap img{
  max-width: 280px;
  width: 100%;
  height: auto;
  
}
.product_item .title {
    font-size: 16px;
    text-align: center;
    background: #fff;
    padding: 10px;
    color: #000;
    display: block;
    font-family: 'Arial', sans-serif;
    text-decoration: none;
    text-transform: capitalize;
    font-weight: 700;
}
.product_item .bot_wrap {
    font-family: 'Arial', sans-serif;
    padding: 20px;
}
.product_item .top_text {
    font-size: 14px;
    line-height: 22px;
    color: #787878;
    text-transform: uppercase;
    margin-bottom: 3px;
    height: 30px;
}
.product_item .size_box a{
    color: #000;
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid #C4C4C4;
    padding:...