JSFiddle - React, Tailwind, and code Playground

by Nicolas PUJOL

HTML

<nav>
    <ul>
        <li> <a href="">Link One One</a> 
        </li>
        <li> <a href="">Link Two</a> 
        </li>
        <li> <a href="">Link Three</a> 
        </li>
        <li> <a href="">Link Four</a> 
        </li>
        <li> <a href="">Link Six</a> 
        </li>
        <li> <a href="">Link Seven</a> 
        </li>
        <li> <a href="">Link Eight</a> 
        </li>
        <li> <a href="">Link Nine</a> 
        </li>
    </ul>
</nav>

CSS

* {
    margin: 0;
    padding: 0;
}
nav {
    margin: 50px;
    max-width: 600px;
    margin: 50px auto 0 auto;
}
ul {
    list-style: none;
    text-align: center;
}
li {
    display: inline;
    margin: 0 0 10px 0;
}
a {
    display: inline-block;
    border-right: 1px solid red;
    font-size: 1.5em;
    padding: 5px;
    text-decoration: none;
}
li:last-of-type a {
    border-right: none;
}
.noborder a {
    border: 0;
}

JavaScript

$(function () {
    var lastElement = false;
    $("ul > li").each(function () {
        if (lastElement && lastElement.offset().top != $(this).offset().top) {
            lastElement.addClass("noborder");
        }
        lastElement = $(this);
    });
});