JSFiddle - React, Tailwind, and code Playground

by apaul34208

HTML

<p>Please hover over red X</p>
<a href="http://www.dioswfl.org/" class="location" id="location01"><span class="tooltip">Diocesan House<br><br>
<div class="shrink">
<div class="xpolaroids">
  <li title="Diocesan House"><img src="http://s3.amazonaws.com/dfc_attachments/images/3231407/DiocesanSign_web.JPG"/>Diocesan House </li>
</div></div></span></a>

CSS

@-webkit-keyframes lightSpeedIn {
    0% {
        top: 30px;
        -webkit-transform-origin: top left;
        -webkit-transform: translateX(700px) skewX(-50deg) rotate(0deg);
        opacity: 0;
    }
    25% {
        top: 15px;
        -webkit-transform-origin: top left;
        -webkit-transform: translateX(0px) skewX(-50deg)rotate(0deg);
        opacity: 1;
    }
    35% {
        top: 15px;
        -webkit-transform-origin: top left;
        -webkit-transform: translateX(-25px) skewX(0deg)rotate(180deg);
        opacity: 1;
    }
    65% {
        top: -15px;
        -webkit-transform-origin: top left;
        -webkit-transform: translateX(0px) skewX(0deg)rotate(360deg);
        opacity: 1;
    }
    100% {
        top: -15px;
        -webkit-transform-origin: top left;
        -webkit-transform: translateX(0px) skewX(0deg);
        opacity: 1;
    }
}
@-moz-keyframes lightSpeedIn {
    0% {
        top: 30px;
        -moz-transform-origin: top left;
        -moz-transform: translateX(700px) skewX(-50deg) rotate(0deg);
        opacity: 0;
    }
    25% {
        top: 15px;
        -moz-transform-origin: top left;
        -moz-transform: translateX(0px) skewX(-50deg)rotate(0deg);
        opacity: 1;
    }
    35% {
        top: 15px;
        -moz-transform-origin: top left;
        -moz-transform: translateX(-25px) skewX(0deg)rotate(180deg);
        opacity: 1;
    }
    65% {
        top: -15px;
        -moz-transform-origin: top left;
        -moz-transform: translateX(0px) skewX(0deg)rotate(360deg);
        opacity: 1;
    }
    100% {
        top: -15px;
        -moz-transform-origin: top left;
        -moz-transform: translateX(0px) skewX(0deg);
        opacity: 1;
    }
}
@-o-keyframes lightSpeedIn {
    0% {
        top: 30px;
        -o-transform-origin: top left;
        -o-transform: translateX(700px) skewX(-50deg) rotate(0deg);
        opacity: 0;
    }
    25% {
        top: 15px;
        -o-transform-origin: top left;
        -o-transform:...