JSFiddle - React, Tailwind, and code Playground

by Jeff

HTML

<span class="chevron-down"></span>
<span class="chevron-down"></span>
<span class="chevron-right"></span>
<span class="chevron-right"></span>
<span class="chevron-up"></span>
<span class="chevron-up"></span>
<span class="chevron-left"></span>
<span class="chevron-left"></span>

CSS

[class*="chevron-"] {
    display:inline-block;
    height:5px;
    width:5px;
    border:3px solid #000;
}

.chevron-right {
    border-top:0px;
    border-left:0px;
    transform:rotate(-45deg);
    margin-left:-3px;
}

.chevron-left {
    border-bottom:0px;
    border-right:0px;
    transform:rotate(-45deg);
    margin-right:-3px;
}

.chevron-up {
    border-bottom:0px;
    border-right:0px;
    transform:rotate(45deg);
    margin-bottom:-2px;
}

.chevron-down {
    border-top:0px;
    border-left:0px;
    transform:rotate(45deg);
    margin-bottom:2px;
}