JSFiddle - React, Tailwind, and code Playground

by igalst

HTML

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

SCSS

$directions:          top    bottom right left;
$directions-opposite: bottom top    left  right;

$color: red;
$size: 10px;

@for $i from 1 through 4 {
    $dir: nth($directions, $i);
    $opposite-dir: nth($directions-opposite, $i);

    .arrow-#{$dir} {
        border: $size solid transparent;
        border-#{$dir}: 0;
        border-#{$opposite-dir}-color: $color;
    
        display: inline-block;
        width: 0;
        height: 0;
    }
}