JSFiddle - React, Tailwind, and code Playground

by Paul Leech

HTML

<div id="bouncy01">Legend</div>
<div id="bouncy02">Epic</div>
<div id="bouncy03">Rare</div>
<div id="bouncy04">Common</div>
<div id="bouncy05">Wolf</div>

CSS

@-webkit-keyframes bounce {
    0% {-webkit-transform: translateY(0px);}
    25% {-webkit-transform: translateY(-1px);}
    50% {-webkit-transform: translateY(-2px);}
    75% {-webkit-transform: translateY(-1px);}
    100% {-webkit-transform: translateY(0px);}
}
#bouncy01,
#bouncy02,
#bouncy03,
#bouncy04,
#bouncy05{
    margin:1px;
    float: left;
    background: #ff0000;
    padding: 10px;
    border: 1px solid #777;
    border-radius: 0.5rem;
    font-family: sans-serif;;
}
#bouncy02 {
    background: #ffff00;
}
#bouncy03 {
    background: #0c7a79;
}
#bouncy04 {
    background: #00ff7f;
}
#bouncy05 {
    background: #044022;
    color:#fff;
}
#bouncy01 {
    /* -webkit-animation:bounce 0.5s ease-in-out infinite alternate; */
    animation-name: bounce;
    animation-duration: 0.5s;
    animation-timing-function: ease-in-out;
    animation-delay: 1s;
    animation-iteration-count: 5;
    animation-direction: normal;
    animation-fill-mode: forwards;
}
#bouncy02 {
/*     -webkit-animation:bounce 0.4s ease-in-out infinite alternate; */
    animation-name: bounce;
    animation-duration: 0.5s;
    animation-timing-function: ease-in-out;
    animation-delay: 1s;
    animation-iteration-count: 5;
    animation-direction: alternate;
    animation-fill-mode: forwards;
}
#bouncy03 {
   /*  -webkit-animation:bounce 0.35s ease-in-out infinite alternate; */
    animation-name: bounce;
    animation-duration: 0.5s;
    animation-timing-function: ease-in-out;
    animation-delay: 1s;
    animation-iteration-count: 5;
    animation-direction: alternate;
    animation-fill-mode: forwards;
}

#bouncy04 {
   /*  -webkit-animation:bounce 0.45s ease-in-out infinite alternate; */
    animation-name: bounce;
    animation-duration: 0.5s;
    animation-timing-function: ease-in-out;
    animation-delay: 1s;
    animation-iteration-count: 5;
    animation-direction: alternate;
    animation-fill-mode: forwards;
}

#bouncy05 {
/*     -webkit-animation:bounce 0.55s ease-in-out infinite...