JSFiddle - React, Tailwind, and code Playground

HTML

<div class="arrow"><span>this is text</span></div>

CSS

.arrow{
  display:inline-block;
  height:auto;
  background-color:orange;
  cursor:pointer;
}

.arrow span{
  display:inline-block;
  line-height:0;
  padding:15px;
  color:white;
}

.arrow::after{
    width: 0;
    height: 0;
    position: absolute;
    right:0
    top: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 15px solid orange;
    content: "";
}

.arrow:hover{
   background-color:red;
}

.arrow:hover::after{
   border-left-color:red;
}