JSFiddle - React, Tailwind, and code Playground

by Florin Pop

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>

CSS

body {
    margin: 0;
    background-color: aqua;
}

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: right;
}

a {
    color: #ccc;
    display: inline-block;
    padding: 5px 20px 5px 0;
    text-decoration: none;
    text-transform:uppercase;
}

a.active, a:hover {
    background-color: crimson;
    color: white;
}

a.active::before {
    content: " ";
    border-color: black black black transparent ;
    border-style: solid;
    border-width: 5px 5px 5px 10px;
    margin-left: -15px;
}