JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bubble">
            nice
            </div>

CSS

.bubble {
	margin-top: 100px;
	position: relative;
	width: 200px;
	height: 100px;
	text-align: center;
	line-height: 100px;
	background-color: orange;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
}

.bubble:after {
	content:"";
	position:absolute;
	bottom:-20px; /* value = - border-top-width - border-bottom-width */
	left:50px; /* controls horizontal position */
	border-width:20px 0 0 20px; /* vary these values to change the angle of the vertex */
	border-style:solid;
	border-color: orange transparent;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}