JSFiddle - React, Tailwind, and code Playground

HTML

<i class="arrow-top"></i> 
<i class="arrow-bottom"></i>
<i class="arrow-right"></i>
<i class="arrow-left"></i>

SCSS

%arrow-base {
  border: 10px solid transparent;
  display: inline-block;
  width: 0;
  height: 0;
}

$directions: (
  right: left,
  left: right,
  top: bottom,
  bottom: top
);

@each $direction, $opposite in $directions {
  .arrow-#{$direction} {
    @extend %arrow-base;
      border-#{$direction}: 0;
      border-#{$opposite}-color: red;
  }
}