JSFiddle - React, Tailwind, and code Playground

HTML

<div class='screen'>
    <div class='red'></div>
    <div class='green'></div>
    <div class='blue'></div>
</div>

CSS

.screen{
    width:300px;
}
.screen div{
    float:left;
    width:100px;
    height:100px;
}
.red{
    background:red;
    animation:red 1s  infinite;
}
.green{
    background:green;
    animation:green 1.5s 1s infinite;
}
.blue{
    background:blue;
    animation:blue 2s 2s infinite;
}
@keyframes red{
    0%{background:red;}
    50%{background:cyan;}
    100%{background:red;}
}
@keyframes green{
    0%{background:green;}
    50%{background:silver;}
    100%{background:green;}
}
@keyframes blue{
    0%{background:blue;}
    50%{background:yellow;}
    100%{background:blue;}
}

JavaScript

$(document).ready(function(){
                var i=0;
                $(".red").each(function(){
                    i++;
                    $(this).attr("id","red"+i);   
                });
            });