JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="top"></div>
    <div class="bottom">Hello Hello Hello Hello Hello Hello</div>
</div>

CSS

.wrapper div {
    width: 350px;
    height: 100px;
}
.top {
    background: lightgray;
    position: relative;
}
.top:after{
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -25px;
    border-top: 10px solid lightgray;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    
}
.bottom {
    background: beige;
}