JSFiddle - React, Tailwind, and code Playground

HTML

<div class="boxes">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

.boxes {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  align-content: stretch;
  width: 400px;
  height: 400px;
  background: #ccc;
}

.boxes > div {
  display: flex;
  outline: 1px solid silver;
  width: 50%;
}

@keyframes colored {
    0% { background-color: green; }
   20% { background-color: olive; }
   40% { background-color: yellow; }
   60% { background-color: orange; }
   80% { background-color: red; }
  100% { background-color: green; }
}

.boxes > div {
  animation: colored 10s infinite;
}

.boxes > div:nth-child(1) { animation-delay: -4s }
.boxes > div:nth-child(2) { animation-delay: -6s }
.boxes > div:nth-child(3) { animation-delay: -8s }
.boxes > div:nth-child(4) { animation-delay: 0 }