JSFiddle - React, Tailwind, and code Playground

by ordette

HTML

<div id="pointer" class="pointer">
  <div class="text-content">
    <p>Google Products Available</p>
  </div>
</div>

CSS

#pointer {
    position: relative;
    width: 35%;
    height: 28px;
    margin-top: -14px;
    /* border-radius: 20px 0 0 0; */
    background: #0061aa;
    /* clip-path: polygon(0 0,100% 0,95% 50%,100% 100%,0 130%); */
}

#pointer:before{
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 0;
    height: 0;
    border-top: 4px solid #242629;
    border-right: 4px solid #242629;
    border-bottom: 4px solid transparent;
    border-left: 4px solid transparent;
}
.text-content {
  color: #fff;
  text-align: center;
  vertical-align: middle;
  line-height: 28px;
  text-transform: uppercase;
  font-family: Helvetica;
  font-weight: bold;
  font-size: 12px;
}