JSFiddle - React, Tailwind, and code Playground

HTML

<div class="arrow_box">
    <p><span>Tip:</span> Upload your cover image here</p>
    <div id="close">x</div>
</div>

CSS

.arrow_box {
    position: relative;
    width:240px;
    background: #999;
    box-shadow:0 4px 0 #666;
    border-radius:10px;
}
p {
    position:relative;
    z-index:1;
    font:26px/26px Impact;
    text-transform:uppercase;
    letter-spacing:1px;
    padding:10px 15px;
    color:#000;
}
p span{
    color:#fff;
}
.arrow_box:after, .arrow_box:before {
    top: 100%;
    border: solid transparent;
    content:" ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.arrow_box:after {
    border-color: rgba(0,0,0,0);
    border-top-color: #999;
    border-width: 40px;
    left: 50%;
    margin-top:-40px;
    margin-left: -15px;
    transform:rotate(-75deg);
    -ms-transform:rotate(-75deg); /* IE 9 */
    -moz-transform:rotate(-75deg); /* Firefox */
    -webkit-transform:rotate(-.75deg); /* Safari and Chrome */
    -o-transform:rotate(-75deg); /* Opera */
}
.arrow_box:before {
    position:absolute;
    z-index:-1;
    border-color: rgba(0,0,0,0);
    border-top-color: #666;
    border-width: 45px;
    left: 50%;
    margin-top:-43px;
    margin-left: -15px;
    transform:rotate(-750deg);
    -ms-transform:rotate(-75deg); /* IE 9 */
    -moz-transform:rotate(-75deg); /* Firefox */
    -webkit-transform:rotate(-.75deg); /* Safari and Chrome */
    -o-transform:rotate(-75deg); /* Opera */
}
#close{
    position:absolute;
    top:-15px;
    right:-15px;
    width:30px;
    height:30px;
    border-radius:20px;
    border:4px solid #999;
    background:#000;
    text-align:center;
    color:#fff;
    font:bold 20px/30px Arial;
    vertical-align:middle;
}