JSFiddle - React, Tailwind, and code Playground

by Ramsey Feng

HTML

<div id="blink"><span>This is blinking text and background</span>
</div>

CSS

#blink {
  text-align: center;
  background: yellow;
  color: blue;
  margin: 0;
  padding: 20px;
}
#blink span {
  font-size: 2em;
  font-weight: bold;
  display: block;
}

JavaScript

$(document).ready(function() {

  var intval;
    intval = setInterval(function(){
       blinkFont(); 
    },500);
    
    setTimeout(function() {

      alert('clear');
        clearInterval(intval);
}, 3000);
    
    
    
});

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";

}