JSFiddle - React, Tailwind, and code Playground

by sebababi

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<i class="icon-arrow-up rotate-45-left"></i>
<i class="icon-arrow-up"></i>
<i class="icon-arrow-up rotate-45-right"></i>
<br/>
<i class="icon-arrow-left"></i>
<i class="icon-arrow-up hidden"></i>
<i class="icon-arrow-right"></i>
<br/>
<i class="icon-arrow-down rotate-45-right"></i>
<i class="icon-arrow-down"></i>
<i class="icon-arrow-down rotate-45-left"></i>

CSS

.rotate-45-left:before {
    -o-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.rotate-45-right:before {
    -o-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.hidden {
    visibility: hidden;
}