JSFiddle - React, Tailwind, and code Playground

HTML

<div class="navigation">
        <a href="" >hello</a>
        <a href="" >hello</a>
        <a href=""> hello</a>
        <a href="" >hello</a>
        <a href="" >hello</a>
        <a href="" >hello</a>
    </div>

CSS

* {
    padding: 0;
    margin: 0;
}
body {
    background: gray;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.navigation {
    width: 200px;
    padding: 0px 10px 0px 0px;
    background: white;
    display: flex;
    position: relative;
    flex-flow: column;
}

.navigation a {    
    position: relative;
    background: blue;
    padding: 20px;
    color:white;
}
.navigation a:nth-child(1):before,
.navigation a:nth-child(1):after {
    display: none;
}
.navigation a:before,
.navigation a:after {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%);
    content: '';
    position: absolute;
    width: 31%;
    height: 100%;
    background: white;
    right: 0;
    top: 0;
}
.navigation a:hover {
    border-radius: 40px;
    color:blue;
    background: white;
}
.navigation a:hover:before,
.navigation a:hover::after {
    visibility: visible;
    opacity: 1;
}
.navigation a::after {
    border-radius: 0px 0px 40px 0px;
    background: blue;
}
 a:hover + a {
     border-radius: 0px 40px 0px 0px;
 }