JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <ul>
        <li><a href="#">Пункт1</a><!--закрывающий li не ставит чтобы не было word-spacing-->
        <li><a href="#">Пункт2</a>
        <li><a href="#">Пункт3</a></li>
    </ul>
</body>

CSS

ul{
    background:#803780;
    padding-top:0.8em;
    text-align:right;
}

li{
    display:inline-block;
    margin-right:1em;
}

a{
    color:#fff;
    border: 1px solid #fff;
    border-bottom:none;
    padding:.4em .5em;
    display:block;
    font-size:0.8em;
    text-decoration:none;
}