JSFiddle - React, Tailwind, and code Playground

by KURO KUMO

HTML

<div class="sandbox fixed animated lightSpeedOut">
    <div id="animateTest" class="">
        <p>I fight for the user.</p>
    </div>
</div>

CSS

@charset "UTF-8";
body {
}
.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
}
.animated.hinge {
    animation-duration: 2s;
}
@-moz-keyframes flash {
0%, 50%, 100% {
    opacity: 1;
}
25%, 75% {
    opacity: 0;
}
}
@-moz-keyframes flash {
0%, 50%, 100% {
    opacity: 1;
}
25%, 75% {
    opacity: 0;
}
}
.animated.flash {
    animation-name: flash;
}
@-moz-keyframes shake {
0%, 100% {
    transform: translateX(0px);
}
10%, 30%, 50%, 70%, 90% {
    transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
    transform: translateX(10px);
}
}
@-moz-keyframes shake {
0%, 100% {
    transform: translateX(0px);
}
10%, 30%, 50%, 70%, 90% {
    transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
    transform: translateX(10px);
}
}
.animated.shake {
    animation-name: shake;
}
@-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
    transform: translateY(0px);
}
40% {
    transform: translateY(-30px);
}
60% {
    transform: translateY(-15px);
}
}
@-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
    transform: translateY(0px);
}
40% {
    transform: translateY(-30px);
}
60% {
    transform: translateY(-15px);
}
}
.animated.bounce {
    animation-name: bounce;
}
@-moz-keyframes tada {
0% {
    transform: scale(1);
}
10%, 20% {
    transform: scale(0.9) rotate(-3deg);
}
30%, 50%, 70%, 90% {
    transform: scale(1.1) rotate(3deg);
}
40%, 60%, 80% {
    transform: scale(1.1) rotate(-3deg);
}
100% {
    transform: scale(1) rotate(0deg);
}
}
@-moz-keyframes tada {
0% {
    transform: scale(1);
}
10%, 20% {
    transform: scale(0.9) rotate(-3deg);
}
30%, 50%, 70%, 90% {
    transform: scale(1.1) rotate(3deg);
}
40%, 60%, 80% {
    transform: scale(1.1) rotate(-3deg);
}
100% {
    transform: scale(1) rotate(0deg);
}
}
.animated.tada {
    animation-name: tada;
}
@-moz-keyframes swing {
20% {
    transform: rotate(15deg);
}
40% {
    transform: rotate(-10deg);
}
60% {
    transform: rotate(5deg);
}
80% {
    transform: rotate(-5deg);
}
100% {
    transform:...