JSFiddle - React, Tailwind, and code Playground

HTML

<div class="item">
    <div class="top">Button Text</div>
    <div class="borders"></div>
    <div class="arrow">
        <div class="leftcurve"></div>
        <div class="rightcurve"></div>
    </div>
</div>

CSS

.item {
    background-color: white;
    width: 200px;
}
.top {
    margin-bottom: -8px;
    text-align: center;
}
.borders {
    border-bottom: black solid 1px;
    border-left: black solid 1px;
    border-right: black solid 1px;
    height: 8px;
    border-bottom-right-radius:8px;
    border-bottom-left-radius:8px;
}
.leftcurve {
    height:5px;
    width: 5px;
    border-top:black solid 1px;
    border-right: black solid 1px;
    border-top-right-radius: 5px;
    display: inline-block;
}
.rightcurve {
    height: 5px;
    width: 5px;
    border-top: black solid 1px;
    border-left: black solid 1px;
    border-top-left-radius: 5px;
    display: inline-block;
    margin-left: -4px;
}
.arrow {
    background-color: white;
    top: -9px;
    left: 50px;
    width:12px;
    position: relative;
    z-index:50;
}