JSFiddle - React, Tailwind, and code Playground

by Darlei Zillmer

HTML

<li class="balao">Menu X</li>
<li class="active balao">Menu Y</li>

CSS

.balao{
	background: #D10A10;
	border-radius: 15px;
	padding:10px 25px;
display:inline-block;
	position: relative;
  text-align: center;
  color:#fff;
}
.active{
  background:#FCCF00;
  color:#000;
}
.active:after{
	content: "";
	width: 0;
	height: 0;
	position: absolute;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 20px solid #FCCF00;
	bottom: -10px;
	left: 30%;
}