JSFiddle - React, Tailwind, and code Playground
HTML
<div id="blink"><span>Demo</span>
</div>
CSS
#blink {
text-align: center;
background: #c6c6c6;
color: #fff;
margin: 0;
padding: 20px;
}
#blink span {
font-size: 2em;
font-weight: bold;
display: block;
}
JavaScript
$(document).ready(function(){
var myVar;
myVar = setInterval(blinkFont, 500);
function blinkFont() {
var curColor = document.getElementById("blink").style.color;
var curBgC = document.getElementById("blink").style.background;
document.getElementById("blink").style.color = curColor === "red" ? "blue" : "red";
document.getElementById("blink").style.background = curBgC === "black" ? "yellow" : "black";
}
setTimeout(function () {
$("#blink").css('visibility', 'visible');
clearInterval(myVar);
}, 15000); // after 3 seconds it'll stop blinking
});