JSFiddle - React, Tailwind, and code Playground

by salman

HTML

<ul>
    <li>First page</li>
    <li>Second page</li>
    <li>Third page</li>
    <li>Fourth page</li>
    <li>Another example page</li>
    <li>This could be the last page</li>
    <li>But its not</li>
    <li>This is actually the last page</li>
</ul>

SCSS

ul {
    list-style: none;
    font-size: 0px;
    li {
        font-size: 18px;
        display: inline-block;
        padding: 10px 30px;
        border: 1px solid black;
        margin: 10px -1px 10px 0;
        &:first-child, &.first {
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
            background: #AAA;
        }
        &:last-child, &.last {
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            background: #CCC;
        }
    }
}

JavaScript

var timeout;
$(window).on("load resize", function () {
    console.log("event debounced");
    if (timeout) {
        window.clearTimeout(timeout);
    }
    timeout = setTimeout(function () {
        console.log("resizing");
        $("ul > li").removeClass("first last").each(function () {
            if ($(this).next().length && $(this).offset().top < $(this).next().offset().top) {
                $(this).addClass("last");
            }
            if ($(this).prev().length && $(this).offset().top > $(this).prev().offset().top) {
                $(this).addClass("first");
            }
        });
    }, 100);
});