JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
    <nav>
        <a href="#">Ссылка 1</a>
        <a href="#">Ссылка 2</a>
        <a href="#">Ссылка 3</a>
        <a href="#">Ссылка 4</a>
    </nav>
</body>
</html>

CSS

nav{
        width: 486px;
        margin: 30px auto;
        height: 29px;
    }

    a{
        float: left;
        padding: 5px 25px;
        text-decoration: none;
        position: relative;
        border-width: 0 1px 0 1px;
        border-style: solid;
        border-color: #99cd4e;
        font-family: Arial, sans-serif;
        background: -webkit-linear-gradient(top, #93c940 0%,#7ba92f 100%);
        background: -moz-linear-gradient(top, #93c940 0%,#7ba92f 100%);
        background: -o-linear-gradient(top, #93c940 0%,#7ba92f 100%);
        background: -ms-linear-gradient(top, #93c940 0%,#7ba92f 100%);
        background: linear-gradient(top, #93c940 0%,#7ba92f 100%);
    }

    a:first-child{
        border-radius: 12px 0 0 12px;
        border-left: none;
    }

    a:last-child{
        border-radius: 0 12px 12px 0;
        border-right: none;
    }

    a:hover{
        background: -webkit-linear-gradient(top, #ffc481 0%,#df6710 100%);
        background: -moz-linear-gradient(top, #ffc481 0%,#df6710 100%);
        background: -o-linear-gradient(top, #ffc481 0%,#df6710 100%);
        background: -ms-linear-gradient(top, #ffc481 0%,#df6710 100%);
        background: linear-gradient(top, #ffc481 0%,#df6710 100%);
        color: #efe;

    }

    a:after, a:before {
        top: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
    }

    a:hover:after {
        border-top-color: #df6710;
        border-width: 6px;
        left: 50%;
        margin-left: -6px;
    }