JSFiddle - React, Tailwind, and code Playground

by teneff

HTML

<ul>
    <li>
        <a href="">Home</a>
    </li>
    <li>
        <a href="">Page 1</a>
    </li>
    <li>
        <a href="">Page 2</a>
    </li>
</ul>

CSS

ul {
    list-style: none;
}
li {
    float: left;
    position: relative;
    text-align: center;
    margin-left: -25px;
}
li:first-child {
    margin-left: 0!important;
}
li a {
    display: block;
    height: 30px;
    position: relative;
    padding: 10px 50px;
    text-decoration: none;
    font: normal 12px/28px Verdana;
}
li a:hover {
    background: green;
}
li a:hover:after, li a:hover:before {
    border-color: green;
}
li a:after, li a:before {
    border: 25px solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    top: 50%;
    margin-top: -25px;
}
li a:after {
    border-right-width: 0!important;
    border-left-color: transparent!important;
    left: 0;
}
li a:hover:after {
    border-left-color: #fff!important;
}
li a:before {
    border-right-width: 0!important;
    border-top-color: transparent!important;
    border-bottom-color: transparent!important;
    right: 0
}
li a:hover:before {
    border-top-color: #fff!important;
    border-bottom-color: #fff!important;
}