JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
    <div class="inner">X</div>
    <a href="#">Text here</a>
</div>

CSS

.outer
{
    width: 300px;
    height: 100px;
    line-height: 100px;
    border: 1px solid black;
    background: lightBlue;
    position:relative;
    margin: 50px;
    
    font-size: 42px;
    text-align: center;
    
}
.outer:before
{
    content: '';
    width: 48px;
    height: 24px;
    position: absolute;
    left:0;right:0;
    top: -24px;
    z-index: -1;
    margin:auto;
    border-radius: 24px 24px 0 0;
    border: 1px solid black;
    background: lightBlue;
}
.inner
{
    width: 44px;
    height: 44px;
    line-height: 44px;
    position: absolute;
    left:0;right:0;
    top: -22px;
    margin:auto;
    border-radius: 22px;
    border: 2px solid lightBlue;
    font-size: 32px;
    background: orange;
    text-align: center;
}