JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bubble">

</div>

CSS

.bubble {
  width: 100%; position: relative;
  height: 100px;
   background: -webkit-linear-gradient(left,#67b04f , #40bede); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, #67b04f , #40bede); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, #67b04f , #40bede); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, #67b04f , #40bede); /* Standard syntax */
}
.bubble::after {
    border-left: 13px solid rgba(0, 0, 0, 0);
    border-right: 13px solid rgba(0, 0, 0, 0);
    border-top: 18px solid #4db9af;
    bottom: -17px;
    content: "";
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    width: 1px;
}