JSFiddle - React, Tailwind, and code Playground

HTML

<div class="arrow"></div>

CSS

.arrow{
  width: 40px;
  height: 30px;
  border: 2px solid #ffce55;
  border-right: none;
  position: relative;
}

div:after{
  content: '';
  position: absolute;
  width: 2px;
  height: 19.5px;
  background: #ffce55;
  right: -5px;
  top: -2.5px;
  -webkit-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
  transform: rotate(-30deg);
}

div:before{
  content: '';
  position: absolute;
  width: 2px;
  height: 19.5px;
  background: #ffce55;
  right: -5px;
  bottom: -2.5px;
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  transform: rotate(30deg);
}