JSFiddle - React, Tailwind, and code Playground

HTML

<A>Step 1</A>
<A>Step 2</A>
<A>Step 3</A>
<A class="clsFinal">Step 4</A>

SCSS

A {
    position: relative;
    padding: 0 3px;
    padding-left: 12px;
    background-color: #F5F6F7;
    color: #8A8B98;
    border: solid 1px #82B48B;
    font-weight: bold;
    text-decoration: none;
}

A:after {
    position: absolute;
    top: 0;
    right: -10px;
    content: "";
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #82B48B;
    z-index: 2;
}

A:hover {
    background-color: #CBDDB9;
    cursor: default;    
}

A:active {
    background-color: #CBDDB9;
}

.clsFinal {
    border-color: #51875B;
    color: #51875B;
    padding-right: 10px;
}

.clsFinal:after {
    content: "";
    border: solid 0px;
}

.clsSelected {
    background-color: #CBDDB9;
}

JavaScript

$("A").click(function() {
    $("A").each(function() {
        $(this).removeClass("clsSelected");
    });
    $(this).addClass("clsSelected");
});