JSFiddle - React, Tailwind, and code Playground

by der_robert

HTML

<div id="animated-example" class="animated wobble">TEST</div>

CSS

body{
  background-color: #1b251f;
}

#animated-example { 
   height: 200px; 
   margin: 100px auto; 
   width: 300px; 

color: #ff413a;
font-family: 'VT323', monospace;
font-size: 24px;
text-transform: uppercase;
line-height: 0.85;
padding-bottom: 12px;
}

.animated { 
    animation-duration: 0.013s; 
    animation-fill-mode: both; 
    animation-iteration-count:infinite; 
} 

@keyframes wobble { 
  0% { transform: translateX(0%); } 
  1% { transform: translateX(5px) }
  5% { transform: translateX(0%); }
  100% { transform: translateX(0%); } 
} 
.wobble { 
    animation-name: wobble; 
}