JSFiddle - React, Tailwind, and code Playground

CSS Animated Spinning Squares V.2 for new jp.com

by Jennifer Perrin

HTML

<div class="spinIt">
    <ul class="spinning">
        <li><a href="#" class="square passionate">Passionate<span class="square">I absolutely love what I do everyday</span></a></li>
        <li><a href="#" class="square enthusiastic">Enthusiastic<span class="square">I want to learn &amp; continue to grow my skills</span></a></li>
        <li><a href="#" class="square focused">Focused<span class="square extra">I am determined &amp; I have the right attitude</span></a></li>
    </ul>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Raleway);

body {  background: #f1f1f1 url(http://jenniferperrin.com/img/body-bg.jpg); }
.spinIt { margin: 50px auto; width: 125px; }

.spinning ul {
    text-align: center;
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
            box-sizing: border-box;
}
    li {
        list-style: none;
        position: relative;
        width: 100px;
        height: 100px;
        margin: 10px 0;
        padding: 0;
            -webkit-box-sizing: border-box;
               -moz-box-sizing: border-box;
                 -o-box-sizing: border-box;
                    box-sizing: border-box;
    }

@-moz-keyframes rotate { 0% {transform: rotate(0deg);} 100% {transform: rotate(-360deg);} }
@-webkit-keyframes rotate { 0% {transform: rotate(0deg);} 100% {transform: rotate(-360deg);} }
@-o-keyframes rotate { 0% {transform: rotate(0deg);} 100% {transform: rotate(-360deg);} }
@keyframes rotate { 0% {transform: rotate(0deg);} 100% {transform: rotate(-360deg);} }

.square {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding-top: 35px;
    text-decoration: none;        
    text-align: center;
    font-size: 16px;        
    text-shadow: 0 1px 0 rgba(255,255,255,.7);
    font-family: 'Raleway';
    box-shadow: 2px 2px 7px rgba(0,0,0,.2);
    z-index: 1;
    border-width: 4px;
    border-style: solid;
    margin: 0;
    -webkit-transition: all .25s ease-in-out;
       -moz-transition: all .25s ease-in-out;
         -o-transition: all .25s ease-in-out;
            transition: all .25s ease-in-out;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
             -o-box-sizing: border-box;
                box-sizing: border-box;
}
    .square:hover {
        width: 130%;
        height: 130%;
        left: -15%;
        top: -15%;
        font-size: 14px;
        z-index:...