JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu-container">
    <li><a href="" class="active">home</a>

    </li>
    <li><a href="">about</a>

    </li>
    <li><a href="">video</a>

    </li>
    <li><a href="">edit</a>

    </li>
    <li><a href="">logout</a>

    </li>
</ul>

SCSS

$mypadding: 15px;
 body {
    margin: 0;
}
ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: right;
}
a {
    color: #ccc;
    display: inline-block;
    padding: ($mypadding/2) $mypadding;
    text-decoration: none;
    text-transform:uppercase;
    &.active, &:hover {
        background-color: crimson;
        color: white;
    }
    &.active::before {
        content:"\A";
 position: absolute;
        border-color: transparent;
        border-left-color: green;
        border-width: $mypadding;
        border-right-width: 0;
        border-style: solid;
        margin-left: -($mypadding);
        margin-top: -($mypadding/2);
    }
}