JSFiddle - React, Tailwind, and code Playground

HTML

<button id="mybutton">
  click me
</button>

<div id="quizreminderarea" ><textarea id="quizreminder" class=""></textarea></div>

CSS

.flashgreen {
    -webkit-animation-name: flashgreen;
    -webkit-animation-duration: 0.3s;

    animation-name: flashgreen;
    animation-duration: 0.3s;
}

@-webkit-keyframes flashgreen {  
    from { background: #48ff00; }
    to   { background: default; }
}

@keyframes flashgreen {  
    from { background: #48ff00; }
    to   { background: default; }
}

#div {
  width: 150px;
  
}
#quizreminder {
	left: 74%;
	height:12em;
   	background: white;
    color: black;
    position:fixed;
}

#quizreminderarea {
	width: 5000px;

	height:12em;
   	background: white;
    color: black;
    position:fixed;


}

JavaScript

document.getElementById("mybutton").addEventListener("click", myflashgreen);

function myflashgreen() {

	document.getElementById("quizreminderarea").className += " flashgreen";
	document.getElementById("quizreminder").className += " flashgreen";

    setTimeout(function() {
			document.getElementById("quizreminderarea").classList.remove("flashgreen");
			document.getElementById("quizreminder").classList.remove("flashgreen");

    }, 410);

}