JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="seta-cima">Seta para cima</a>
<span class="seta-baixo">Seta para baixo</span>
<i class="seta-esquerda">Seta para esquerda</i>
<div class="seta-direita">Seta para direita</div>
<div class="arrow-left-top">Seta para direita</div>

CSS

/**
*** Seta para ESQUERDA
**/
.seta-esquerda:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  width: 0; 
  height: 0; 

  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent; 
  border-right: 5px solid blue; 
}

/**
*** Seta para DIREITA
**/
.seta-direita:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  width: 0; 
  height: 0; 

  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid green;
}

/**
*** Seta para CIMA
**/
.seta-cima:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  width: 0; 
  height: 0; 

  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid black;
}

/**
*** Seta para BAIXO
**/
.seta-baixo:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  width: 0; 
  height: 0; 

  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #f00;
}


/**
*** Formatação para o exemplo
**/
a,
span,
i,
div {
  font: 14px sans-serif;
  display: block;
  padding-top: 10px;
}

.arrow-left-top:before {
content: "";
display: inline-block;
vertical-align: middle;
margin-right: 10px;
width: 0px; 
height: 0px; 
border-left: 0px;
border-right: 50px solid transparent;
border-top: 50px solid #f00;
}