JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu">
    <span class="group">
        <a href="#" class="menu-item">Menu</a>
        <a href="#" class="menu-item">Menu</a>
        <a href="#" class="menu-item">Menu</a>
    </span>
    <span class="group">
        <a href="#" class="menu-item">Menu</a>
        <a href="#" class="menu-item">Menu</a>
        <a href="#" class="menu-item">Menu</a>
    </span>
</div>

CSS

.menu {
    text-align: center;
}

.menu-item {
    display: block;
    position: relative;
    text-align: center;
    padding: 10px;
    background: #fff;
    margin: 0 0 5px;
    background: #ccc;
}


@media (min-width: 500px) {
    .group {
        display: block;
        text-align: center;
    }
    
    .menu-item {
        display: inline-block;
        padding: 10px 30px;   
        background: #fff;
    }
    
    .group .menu-item + .menu-item {
        border-left: 1px solid #000;
    }
}

@media (min-width: 1000px) {
    .group {
        display: inline-block;
    }
    
    .menu-item {
        display: inline-block;
        padding: 10px 30px;   
        background: #fff;
        border-right: 1px solid #000;
    }
    
    .group .menu-item + .menu-item {
        border-left: 0;
    }
    
    .group:last-child .menu-item:last-child {
        border-right: 0;
    }
}