JSFiddle - React, Tailwind, and code Playground

HTML

<div id="items">
    <div id="top">One</div>
    <div>Two</div>
    <div>Three</div>
    <div id="bottom">Four</div>
</div>

CSS

#items {
    border: 1px solid black;
    border-radius: 10px;
    overflow: hidden;
    position: absolute;
}

#items div {
    border-bottom: 1px solid black;
    padding: 5px;
}

#items #top:hover {
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    background-color: #ccc;
}
#items div:hover{
    background-color: #ccc;
}
#items #bottom:hover {
    background-color: #ccc;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}