JSFiddle - React, Tailwind, and code Playground
HTML
<input type="text" value="hello world">
<br>
<button>pew</button>
CSS
@keyframes green-flash {
from { background-color: lightgreen; }
to { background-color: inherit; }
}
.make-it-flash {
position: relative;
animation: green-flash 3s ease;
}
JavaScript
let button = document.querySelector('button'),
input = document.querySelector('input')
button.addEventListener('click', function() {
restartAnimation(input, 'make-it-flash')
})
function restartAnimation(elem, classname) {
elem.classList.remove(classname);
void elem.offsetWidth;
elem.classList.add(classname);
}