JSFiddle - React, Tailwind, and code Playground

by Boba Poshtar

HTML

<ul class="nav_memu_bottom">
    <li>Бесплатная доставка<br>по Хмельницкому</li>
    <li>Подарочный<br>сертификат</li>
    <li>Выгодные условия<br>оптовикам</li>
    <li>Работа у нас</li>
</ul>

CSS

.nav_memu_bottom {
    position: relative;
    margin: 0 auto;
    padding: 100px 0;
    width: 1226px;
    list-style: none;
    text-align: center;
}

.nav_memu_bottom li {
    position: relative;
    display: inline-block;
    padding: 16px 0;
    width: 220px;
    min-height: 36px;
    color: #403227;
    font: italic 600 14px / 18px OpenSans, Helvetica, Arial, sans serif;
    border: solid 2px #f2a287;
    vertical-align: top;
}

.nav_memu_bottom li:before {
    content: "";
    position: absolute;
    left: 50%;
    top: -16px;
    margin-left: -20px;
    width: 40px;
    height: 28px;
    background: #ddd;
}

.nav_memu_bottom li:after {
    content: "";
    position: absolute;
    left: 50%;
    top: -14px;
    margin-left: -12px;
    width: 24px;
    height: 24px;
    background: url(sprite.png) no-repeat left top;
    outline: 1px solid #999;
}

.nav_memu_bottom li:nth-child(2):after {
    background-position: -26px top;
}
.nav_memu_bottom li:nth-child(3):after {
    background-position: -52px top;
}
.nav_memu_bottom li:nth-child(4):after {
    background-position: -78px top;
}