JSFiddle - React, Tailwind, and code Playground

by Felype Rennan

HTML

<div class="fancy-alpha-nav">
    <ul class="nav-alpha">
        <li><a>A</a></li>
        <li><a>B</a></li>
        <li><a>C</a></li>
        <li><a>D</a></li>
        <li><a>E</a></li>
        <li><a>F</a></li>
        <li><a>G</a></li>
        <li><a>H</a></li>
        <li><a>I</a></li>
        <li><a>J</a></li>
        <li><a>K</a></li>
        <li><a>L</a></li>
        <li><a>M</a></li>
        <li><a>N</a></li>
        <li><a>O</a></li>
        <li><a>P</a></li>
        <li><a>Q</a></li>
        <li><a>R</a></li>
        <li><a>S</a></li>
        <li><a>T</a></li>
        <li><a>U</a></li>
        <li><a>V</a></li>
        <li><a>W</a></li>
        <li><a>X</a></li>
        <li><a>Y</a></li>
        <li><a>Z</a></li>
    </ul>
    <div class="mark"></div>
</div>

SCSS

.nav-alpha {
    display: flex;
    list-style: none;
    margin: 0; padding: 0;
    li {
        display: block;
        min-width: 22px;
        text-align:center;
        width: 22px;
        cursor: pointer;
        transition: 200ms ease-in-out;
        user-select: none;
        &.highlight {
            color: #0095fd;
        }
    }
}

.mark {
    margin: 0; padding: 0;
    width: 22px;
    height: 22px;
    background-size:contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: 200ms ease-in-out;
    background-image: url('http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/magic-marker-icons-arrows/114830-magic-marker-icon-arrows-arrow-up.png');
}

JavaScript

$(".nav-alpha").find("li").click(function(e) {
    $(this).addClass("highlight");
    $(this).prevAll().addClass("highlight");
    $(this).nextAll().removeClass("highlight");
        $(this).closest(".fancy-alpha-nav").find(".mark").css("margin-left", ($(this).index() * 22)+"px");
});