JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
            <ul>
                <li><a href="/chapter-one">Глава первая</a></li>
                <li><a href="/chapter-two">Глава вторая</a></li>
                <li><a href="/chapter-three">Глава третья</a></li>
                <li><a href="/chapter-four">Глава четвертая</a></li>
            </ul>
        </nav>

CSS

nav {
    
    background: #15A5E3;
    border-radius:5px;
}

ul,li{
    margin: 0;
    padding: 0;
}

li {
    
    display: inline-block;
    white-space: nowrap; 
}

ul a{
    display: block;
    padding: 15px 20px;
    text-decoration: none;
    color: #fff;
}

ul a:hover{
    background: #000;   
}

ul > li:first-child > a:hover{
    border-radius: 5px 0 0 5px;
}