JSFiddle - React, Tailwind, and code Playground

by andrelaszlo

HTML

<div id="example" class="pulse_intro pulse">
    HELLO, HOW AR3 YOU?
</div>

CSS

html { width: 100%; }
     body { background-color: #555; width: 100%; margin: auto; padding-top: 100px;}
     #example { border: 3px solid yellow; background-color: #faa; width: 300px; height: 100px; margin: auto;}

     /* http://www.youtube.com/watch?v=UbTBk4pDIHA */

     @-webkit-keyframes pulse {
       0% {
         transform: translate(0, 0)
                    rotate(0deg);
         -webkit-transform: translate(0, 0)
                    rotate(0deg);
       }

       20% {
         transform: translate(1px, 0.5px)
                    rotate(0.1deg);
         -webkit-transform: translate(1px, 0.5px)
                    rotate(0.1deg);
       }

       40% {
         transform: translate(-1px, -0.5px)
                    rotate(-0.1deg);
         -webkit-transform: translate(-1px, -0.5px)
                    rotate(-0.1deg);
       }

       60% {
         transform: translate(0.5px, 1px)
                    rotate(0.1deg);
         -webkit-transform: translate(0.5px, 1px)
                    rotate(0.1deg);
       }

       80% {
         transform: translate(-0.5px, -1px)
                    rotate(-0.1deg);
         -webkit-transform: translate(-0.5px, -1px)
                    rotate(-0.1deg);
       }

       100% {
         transform: translate(0px, 0px)
                    rotate(0deg);
         -webkit-transform: translate(0px, 0px)
                    rotate(0deg);
       }

     }

     @keyframes pulse {
       0% {
         transform: translate(0, 0)
                    rotate(0deg);
         -webkit-transform: translate(0, 0)
                    rotate(0deg);
       }

       20% {
         transform: translate(1px, 0.5px)
                    rotate(0.1deg);
         -webkit-transform: translate(1px, 0.5px)
                    rotate(0.1deg);
       }

       40% {
         transform: translate(-1px, -0.5px)
                    rotate(-0.1deg);
         -webkit-transform: translate(-1px, -0.5px)
                    rotate(-0.1deg);
       }

 ...