JSFiddle - React, Tailwind, and code Playground

by Ritesh Pandey

HTML

<!-- Space between inline elements -->
<div class="menu-block">
    <span class="menu-item">One</span>
    <span class="menu-item">Two</span>
    <span class="menu-item">Three</span>
    <span class="menu-item">Four</span>
    <span class="menu-item">Five</span>
    <span class="menu-item">Six</span>
    <span class="menu-item">Seven</span>
</div>

CSS

.menu-item{
    padding: 5px 15px;
    display: inline-block;
}
.menu-item:nth-child(2n){
    background-color: #f90;
    border-right: #f99 solid 2px;
    
}
.menu-item:nth-child(2n+1){
    background-color: #ccc;
}
.menu-block{

}