JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div class="animation">
        Click Me!
    </div>
</div>

CSS

.mc-ylw-blk{
    background:#000;
    color:white;
    height:50px;
    width:180px;
    padding:5px
}
.mc-blk-red{
  background:#000;
    background:red;
    height:50px;
    width:180px;
    padding:5px
}
.mc-blk-ylw{
    color:#000;
    background:yellow;
    height:50px;
    width:180px;
    padding:5px
}
.animation{
  text-align:center;
  font-size:21px;
}

JavaScript

function startAnimation($elements) {
    $elements.switchClass("mc-ylw-blk", "mc-blk-ylw", 0)
          .delay(500).switchClass("mc-blk-ylw", "mc-ylw-blk", 0)
          .delay(250).switchClass("mc-ylw-blk", "mc-blk-ylw", 0)
          .delay(250).switchClass("mc-blk-ylw", "mc-ylw-blk", 0)
          .delay(250).switchClass("mc-ylw-blk", "mc-blk-ylw", 0)
          .delay(250).switchClass("mc-blk-ylw", "mc-ylw-blk", 0)
          .delay(250).switchClass("mc-ylw-blk", "mc-blk-red", 0)
          .delay(100000).switchClass().done(function () { 
              startAnimation($elements);
          });
}
var $elements=$("#container").find(".animation");
if ($elements.length) {
    startAnimation($elements);
}