JSFiddle - React, Tailwind, and code Playground

by DJS Baker

HTML

<ul>
    <li><a class="one" href="" title=""></a></li>
    <li><a class="one" href="" title=""></a></li>
    <li><a class="one" href="" title=""></a></li>
    <li><a class="one" href="" title=""></a></li>    
</ul>
<ul>
    <li><a class="two" href="" title=""></a></li>
    <li><a class="two" href="" title=""></a></li>
    <li><a class="two" href="" title=""></a></li>
    <li><a class="two" href="" title=""></a></li>    
</ul>

CSS

ul {height: auto; overflow: hidden; width: 100%;}
li {float: left; width: 80px; height: 80px; display: block; background: green; border: 0px solid green; overflow: hidden;}

a {-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-out;
transition: all 0.8s ease-in-out;
width: 80px; height: 80px; display: block; background: red;}



.one {border-radius: 0; width: 80px; height: 80px; display: block; background: red; border: 0px solid red; transform: rotate(0deg);
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Safari and Chrome */}
.one:hover {border: 40px solid green; width: 0; height: 0;transform: rotate(360deg);
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Safari and Chrome */ }

.two {width: 80px; height: 80px; display: block; background: red; border: 0px dotted red;}
.two:hover {border: 40px dotted green; width: 0; height: 0;


 transform: perspective( 600px ) rotateY( 45deg );
}