JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sua-div-aqui">
  
</div>

CSS

.sua-div-aqui{
  height: 200px;
  width: 200px;
  // Chama a animação
  -webkit-animation: nome-animacao 150s steps(1) infinite; /* Safari 4+ */
  -moz-animation:    nome-animacao 150s steps(1) infinite; /* Fx 5+ */
  -o-animation:      nome-animacao 150s steps(1) infinite; /* Opera 12+ */
  animation:         nome-animacao 150s steps(1) infinite; /* IE 10+, Fx 29+ */
}

@-webkit-keyframes nome-animacao {
  0%  {background-color: #A100C7;}
  20% {background-color: #00A1E6;}
  40% {background-color: #A1E633;}
  60% {background-color: #E6B02E;}
  80%{background-color: #DC0063;}
}
@-moz-keyframes nome-animacao {
  0%  {background-color: #A100C7;}
  20% {background-color: #00A1E6;}
  40% {background-color: #A1E633;}
  60% {background-color: #E6B02E;}
  80%{background-color: #DC0063;}
}
@-o-keyframes nome-animacao {
  0%  {background-color: #A100C7;}
  20% {background-color: #00A1E6;}
  40% {background-color: #A1E633;}
  60% {background-color: #E6B02E;}
  80%{background-color: #DC0063;}
}
@keyframes nome-animacao {
  0%  {background-color: #A100C7;}
  20% {background-color: #00A1E6;}
  40% {background-color: #A1E633;}
  60% {background-color: #E6B02E;}
  80%{background-color: #DC0063;}
}