JSFiddle - React, Tailwind, and code Playground

HTML

<div id="background">
<ul>
    <li>Nav Item 1</li>
    <li>Nav Item 2</li>
    <li>Nav Item 2</li>
    <li>Nav Item 4</li>
</ul>
</div>

CSS

#background {
 background-color: grey;
    width: 100%;
    height: 500px;
}

#background ul {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: #fff;
    box-shadow: 0px 0px 2px #333;
    float: left;
    left: 30px;
    top: 30px;
    padding: 10px;
    border-radius: 10px;

}
#background ul::before {
    position: absolute;
    display: inline-block;
    width: 14px;
    height: 10px;
    background-image: url(http://www.kinsmancreative.com/images/menu_triangle.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    top: -7px;
    content: '';
}
/*
#background ul::after {
    content: '';
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid #fff;
    display: inline-block;
    position: absolute;
    top: -11px;
    
}
#background ul::before {
    content: '';
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid #333;
    display: inline-block;
    position: absolute;
    top: -14px;
    border-bottom-color: rgba(0, 0, 0, 0.1);
} */