JSFiddle - React, Tailwind, and code Playground

by Boba Poshtar

HTML

<div class="nav_memu_bottom">
    <div class="wrapper_bottom">
        <div class="nav"><img src="icon_bottom_1.png" alt=""></div>
        <p>Бесплатная доставка<br>по Хмельницкому</p>
    </div>
    <div class="wrapper_bottom">
        <div class="nav"><img src="icon_bottom_2.png" alt=""></div>
        <p>Подарочный<br>сертификат</p>
    </div>
    <div class="wrapper_bottom">
        <div class="nav"><img src="icon_bottom_3.png" alt=""></div>
        <p>Выгодные условия<br>оптовикам</p>
    </div>
    <div class="wrapper_bottom">
        <div class="nav"><img src="icon_bottom_4.png" alt=""></div>
        <p>Работа у нас</p>
    </div>
</div>

CSS

.nav_memu_bottom {
    width: 1226px;
    margin: 0 auto;
    padding: 100px 0;
    text-align: center;
}

.wrapper_bottom {
    position: relative;
    display: inline-block;
    width: 220px;
    border: solid 2px #f2a287;
    vertical-align: top;
}

.nav {
    position: absolute;
    left: 50%;
    top: -16px;
    margin-left: -20px; /* половина ширины блока (картинка 24px + 16px отступы) */
    padding: 0 8px;
    background: #f5f7f5;
}

.nav_memu_bottom p {
    margin: 0;
    padding: 16px 0;
    min-height: 36px;
    color: #403227;
    font: italic 600 14px / 18px OpenSans, Helvetica, Arial, sans serif;
}