JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
</ul>

CSS

* {margin:0; padding:0}
a {float:left; width:100px; margin-top:10px; height:40px; background:#333; border-right:1px solid #fff;}
a:hover {height:50px; margin-top:0; background:#999; position:relative;}
a:hover:after {content:''; position:absolute; display:block; width:10px; height:10px; top:0; right:-11px; background:#333; border-radius:0 10px 0 0}