JSFiddle - React, Tailwind, and code Playground

HTML

<br/>
<div class="box">
    <ul>
        <li><a href="http://www.pintrips.com">Pintrips</a>: Pinterest for travel, this is where I work :)</li>
        <li><a href="http://www.kayak.com">Kayak</a></li>
        <li><a href="http://www.expedia.com">Expedia</a></li>
        <li><a href="http://www.orbitz.com">Orbitz</a></li>
    </ul>
</div>

CSS

.box {
    background-color: #ccc;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    position: relative;
}
.box:hover {
    background: white;
}
.box:hover:after {    
    border-bottom: 20px solid white;
}
.box:before {
    content: ' ';
    display: block;
    position: absolute;
    top: -6px;
    right: 26px;
    width: 8px;
    height: 6px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
}
.box:after {
    content: ' ';
    display: block;
    position: absolute;
    top: -10px;
    right: 10px;
    border-bottom: 20px solid #ccc;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
}


ul {
    margin: 0;
    padding: 0 0 0 15px;
}