JSFiddle - React, Tailwind, and code Playground

by neal_fletcher

HTML

<div class="arrow"></div>

CSS

.arrow {
    position: absolute;
width: 30px;
height: 30px;
top: 40px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
z-index: 99;
    background: pink;
     -o-transition: all .6s;
    -ms-transition: all .6s;
    -moz-transition: all .6s;
    -webkit-transition: all .6s;
    transition: all .6s;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    -o-perspective: 1000;
    perspective: 1000;
}

.arrow:hover {
    transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
}