JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>

CSS

body{
  background: royalblue
}

div{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 50px;
  background: rgba(245, 245, 245, 1);
  border: 1px solid red;
}
div::after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%) rotate(45deg);
  background: inherit;
  background: rgba(245, 0, 0, .5);
  border: 1px solid red;
  width: 20px;
  height: 20px;
  border-top-color: transparent;
  border-left-color: transparent;
  border-radius: 100% 0 0 0;
}